@c3voc/player

v1.2.0

Published

4 years ago

C3VOC HTML5 player component

Downloads

0High
0Medium
0Low

ischluff

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:

iFrame: Easiest but also least configurable option
Static Javascript: Allows you to pass custom parameters to the Clappr player
CommonJS: Allows you to bundle the player as a library with your own web application

Continue reading for detailed descriptions of each method.

With an IFrame-Embed

This is the easiest method, but not very flexible and not recommended for more than one embed per page.

Copy the embed folder to your webpage and embed the player as follows:

...
<div class="playerWrap">
  <iframe class="player" src="embed/index.html?stream=mystream" frameborder="0" allowfullscreen></iframe>
</div>
...

We recommend to use a like CSS the following, to keep the player iframe at a constant 16:9 aspect ratio:

.playerWrap{
  position: relative;
  padding-bottom: 56.25%;
}
.player {
  position: absolute;
  width: 100%;
  height: 100%;
}

Query Parameters

stream

C3VOC stream name

Example

You can take a look at <examples/iframe/index.html> for a working example.

With static js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="player"></div>
</body>
<script src="player.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/iframe/index.html> for a working example.

Using CommonJS (Coming soon)

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