Skip to content

Latest commit

 

History

History
112 lines (93 loc) · 2.49 KB

README.md

File metadata and controls

112 lines (93 loc) · 2.49 KB
Raw

voc-player

C3VOC HTML5-Webplayer based on clappr. Can be used to embed C3VOC streams into your own webpages.

Usage

You can embed the player using a variety of methods. We support the following configurations:

  • UMD: Using standard javascript and a global object
  • ES: Using javascript modules

Continue reading for detailed descriptions of each method.

With UMD js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="player"></div>
</body>
<script src="player.umd.js"></script>
<script>
  // expose Clappr to load additional plugins
  window.Clappr = window.VOCPlayer
</script>
<script src="myplugin.js"></script>
<script>
  new VOCPlayer.Player({
    // C3VOC specific options
    vocStream: "mystream",

    // Standard clappr.io Options
    parentId: "#player",
    plugins: [MyPlugin],
    MyPlugin: {
      ...
    }
  });
</script>
</html>

We recommend the following CSS for correct 16:9 player ratio:

#player > [data-player] {
  padding-bottom: 56.25%;
  height: auto !important;
}
#player > .fullscreen[data-player] {
  padding-bottom: 0;
  height: 100% !important;
}

You can take a look at examples/umdEmbed/index.html for a working example.

Using CommonJS

Install the player

npm install --save voc-player

And import it into your js/ts

import {Player} from "voc-player";
Player({
  // C3VOC specific options
  vocStream: "mystream",

  // Standard clappr.io Options
  parentId: "#player",
  plugins: [MyPlugin],
  MyPlugin: {
    ...
  }
});

Configuration

The voc-player extends the Clappr configuration with custom options and includes some additional plugins per default. You can override all of those options, however doing so may break the player unexpectedly.

voc-player custom options

Stream sources

Add vocStream: "$stream" to play a C3VOC livestream with name $stream.

You can query https://streaming.media.ccc.de/streams/v2.json to find out which stream name a conference room may be using.

Lecture sources

Add vocLecture: "$slug" to play a lecture from media.ccc.de with the slug $slug.

standard clappr options

A list of possible Clappr configuration options is available under https://github.com/clappr/clappr/blob/dev/doc/BUILTIN_PLUGINS.md.

Build

Install dependencies

npm ci

For a dev build

npm run dev

For a production build

npm run build