europeana/media-player

View on GitHub
dev/index.html

Summary

Maintainability
Test Coverage
<!doctype html>
<html lang="en-US">
  <head>
    <style>
      html,
      body, .player-container {
        height: 100%;
        margin: 0;
        width: 100%;
      }
      .eups-player {
        min-height: 300px;
        height: 100%;
        width: 100%;
      }
    </style>
    <style>
      /*!
      * jQuery UI Slider 1.12.1
      * http://jqueryui.com
      *
      * Copyright jQuery Foundation and other contributors
      * Released under the MIT license.
      * http://jquery.org/license
      *
      * http://api.jqueryui.com/slider/#theming
      */.ui-slider{position:relative;text-align:left}.ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1.2em;height:1.2em;cursor:default;-ms-touch-action:none;touch-action:none}.ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0;background-position:0 0}.ui-slider.ui-state-disabled .ui-slider-handle,.ui-slider.ui-state-disabled .ui-slider-range{filter:inherit}.ui-slider-horizontal{height:.8em}.ui-slider-horizontal .ui-slider-handle{top:-.3em;margin-left:-.6em}.ui-slider-horizontal .ui-slider-range{top:0;height:100%}.ui-slider-horizontal .ui-slider-range-min{left:0}.ui-slider-horizontal .ui-slider-range-max{right:0}.ui-slider-vertical{width:.8em;height:100px}.ui-slider-vertical .ui-slider-handle{left:-.3em;margin-left:0;margin-bottom:-.6em}.ui-slider-vertical .ui-slider-range{left:0;width:100%}.ui-slider-vertical .ui-slider-range-min{bottom:0}.ui-slider-vertical .ui-slider-range-max{top:0}
    </style> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" type="text/css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
    <script src="../dist/europeana-media-player.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/dashjs@2.9/dist/dash.all.min.js"></script>
    <script>
      function loadPlayer(event) {
        event.preventDefault()
        if (document.querySelector(".player-container").hasChildNodes) while (document.querySelector(".player-container").firstChild) {
          document.querySelector(".player-container").firstChild.remove()
        }
        let language = null;
        let langParam = window.location.toString().match(/[\?&]language=([\w-]*)/);
        if(langParam){
          language = langParam[1];
        }
        var container = document.querySelector(".player-container");
        var videoObj = { manifest : document.getElementById("manifest").value };
        var options = { editor: "https://video-editor.eu", language: language };
        new EuropeanaMediaPlayer(container, videoObj, options);
      };
    </script>
  </head>
  <body>
    <form onsubmit="loadPlayer(event)">
      <label for="manifest">IIIF manifest:</label><br>
      <input type="text" id="manifest" name="manifest" size="100"><br>
      <input type="submit" value="Load in player">
    </form> 
    <div class="player-container"></div>
  </body>
</html>