C3VOC HTML5-Webplayer based on clappr. Can be used to embed C3VOC streams into your own webpages.
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.
<!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.
Install the player
npm install --save voc-playerAnd 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: {
...
}
});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.
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.
Add vocLecture: "$slug" to play a lecture from media.ccc.de with the slug $slug.
A list of possible Clappr configuration options is available under https://github.com/clappr/clappr/blob/dev/doc/BUILTIN_PLUGINS.md.
Install dependencies
npm ci
For a dev build
npm run devFor a production build
npm run build