<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Bitmovin Player full customized example</title>

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet" type="text/css"/>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">

  <!-- Bitmovin Player -->

  <script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>

  <style>


  </style>

</head>

<body>

<div id="my-player"></div>


<script type="text/javascript">

  var config =   {

    "key": "7e9629fd-8de8-4ed8-a10f-b8ed099684ee"

  };

  var configWithAnalytics = Object.assign({}, config, {

    analytics: {

      key: '9855025d-ab75-4289-a633-dcee16aed324',

      videoId: '360 Test'

    }

  });

  var source = {

    title: '360 First Aid Kit',

    description: 'See first aid kit users environment',

    hls: '//wowzaprod192-i.akamaihd.net/hls/live/766542/92b7634e/playlist.m3u8',

    vr: {

    startPosition: 0,

    contentType: 'single',

    initialRotation: 'true',

    initialRotateRate: 0.07

}

  };

  var container = document.getElementById('my-player');

  var player = new bitmovin.player.Player(container, configWithAnalytics);


  player.load(source).then(

  function() {

      //Success

      console.log('Successfully created Bitmovin Player instance');

    },

  function(reason) {

      //Error

      console.log('Error while creating Bitmovin Player instance');

    }

  );


</script>

</body>

</html>