sdk/howto/startupQuality.html

<!DOCTYPE html>
<!--
*
* Copyright (C) 2015, bitmovin GmbH, All Rights Reserved
*
* Created on: 2015-06-12 14:00:00
* Author:     bitmovin GmbH <dash-player@bitmovin.net>
*
* This source code and its use and distribution, is subject to the terms
* and conditions of the applicable license agreement.
*
-->
<html lang="en">
<head>
  <title>libdash SDK</title>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="../style/demo.css"/>
  <link rel="stylesheet" type="text/css" href="../style/style.css"/>
  <link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'/>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

  <script type="text/javascript" src="js/PreferredStartupQuality.js"></script>
  <script type="text/javascript" src="libdash/settings.js"></script>

  <!-- player -->
  <script type="text/javascript" src="https://bitmovin-a.akamaihd.net/bitdash/latest/bitdash.min.js"></script>
</head>
<body>
<a href="index.html">
  <button id="back-button">Back to the Menu</button>
</a>
<div class="container">
  <h1>Custom Adaptation Logic<span>Set a preferred startup quality</span></h1>

  <div class="content">
    <div class="player-wrapper">
      <div id="player"></div>
    </div>
    <div class="description">
      <h2 class="ca-main">Getting Started with Custom Adaptation</h2>
      <p>The player provides two new events: <strong>onVideoAdaptation</strong> and <strong>onAudioAdaptation</strong>. It can be used to "overwrite" a suggested representation with any other. This can be used to create a custom adaptation logic.</p>
      <p>A sample implementation is available in <a href="js/PreferredStartupQuality.js">/howto/js/PreferredStartupQuality.js</a> adaptation folder of this package. It uses a preferred startup quality and searches for the representation equal to or lower than the startup quality. It uses this or a higher quality (if suggested by the player's internal logic) for a specified amount of time. It can be used as follows:</p>
      <pre><code class="language-javascript">
        var player = bitdash('myVideoDiv');
        player.setup(conf);
        var startupQuality = new PreferredStartupQuality(player, 1000000, 10);
      </code></pre>
      <p>The first parameter is the player object. The second is the preferred quality in bits per seconds and is optional. It defaults to 1mbps. The third, also optional, specifies how long the startup phase lasts, in seconds.</p>

      <p>In addition, it's recommended to set a higher startup threshold than using the default adaptation logic. This is the number of seconds of data which has to be buffered on the client before playback begins. For the PreferredStartupQuality provided, e.g. 5 seconds works for better but also for poorer bandwidth quite good:</p>
      <pre><code class="language-javascript">
        var config = {
          ...
          tweaks: {
            startup_threshold: 5
          }
        }</code></pre>
    </div>
  </div>

</div>
<script type="text/javascript">
(function() {
  var conf = {
    key: window.libdashSettings.credentials.key,
    source: {
      dash: 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd'
    },
    style: {
      width: '50vw',
      aspectratio: '16/9'
    },
    tweaks: {
      startup_threshold: 5
    }
  };

  var player = bitdash('player');
  player.setup(conf);
  var startupQuality = new PreferredStartupQuality(player, 1000000, 10);
})();
</script>
</body>
</html>