@camtv/video-player v2020.8.5

Usage

Installation through NPM

npm install @camtv/video-player --save

import { RenderVideoCamTV, PlayerManager } from "@camtv/video-player";

const player = RenderVideoCamTV({
	id: "my-container-id",
	videoURL: "https://camtv.ams3.cdn.digitaloceanspaces.com/original/CID000016/video/VID0048A6",
	posterURL: "https://media.cam.tv/CID000016/video/VID0048A6/cover.jpg?t=1561462730",
	// ...other options
});
player.on("init", () => {
	console.log("initialized!");
});

Installation as Standalone

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="video-player.standalone.min.js"></script>
<link href="video-player.standalone.min.css" rel="stylesheet" />

<script>
	var player = RenderVideoCamTV({
		id: "my-container-id",
		videoURL: "https://camtv.ams3.cdn.digitaloceanspaces.com/original/CID000016/video/VID0048A6",
		posterURL: "https://media.cam.tv/CID000016/video/VID0048A6/cover.jpg?t=1561462730",
		// ...other options
	});
	player.on("init", () => {
		console.log("initialized!");
	});
</script>

Configuration

The player can be configured with an object, as you can see below

var player = RenderVideoCamTV({
	id: "",
	videoURL: "",
	posterURL: "",
	autoplay: false,
	muted: false,
	preload: "auto",
	small: false,
	bookmarks: false,
	overlays: false,
	headers: {
		Authorization: "Bearer xxxxx",
	},
	floatingControls: {
		playToggle: true,
		audioToggle: {
			restart: false,
			html: "",
		},
	},
	controls: {
		playToggle: true,
		seekButtons: {
			forward: 30,
			back: 30,
		},
		volumePanel: {
			inline: false,
			vertical: false,
		},
		currentTimeDisplay: true,
		timeDivider: true,
		durationDisplay: true,
		rotation: false,
		videoFit: true,
		sourceMenu: true,
		fullscreenToggle: true,
		pictureInPictureToggle: false,
	},
});

Main video parameters

The first parameters defines all base options about video, such as autoplay or preload. You can find all possible values in the table below:

Floating controls

This options refers to all controls that are not inside the controls' bar, such as big play button or volume toggle button. Setting floatingControls to false will disable all floating buttons.

To enable fine tuning, you have to set an object. Here, you can find all the options:

Controls' bar

The controls bar can be completely disabled or fine tuned through an object. To disable controls' bar you have to set controls: false. This will display only play and mute overlay buttons on the video, but disables entirely the control bar.

To enable fine tuning for bar, you have to set an object in order to express wich component you want to show or hide. Here, you can find all the options:

Overlay elements

This options enables some overlay elements during playing, pause, timeupdate or any other event. This options inherits from videojs-overlay library and you could have a looke at that options. This is basically an array of objects. You can set content (inner html), start/end time in seconds or event, div's classes and optionally alignment

overlays: [
	{
		content: "<span>The video is playing</span>",
		start: "play",
		end: "pause",
		class: "my-css-class overlayA",
		align: "bottom-right",
	},
	{
		content: "<span>The video is paused</span>",
		start: "pause",
		end: "play",
		class: "my-css-class overlayE",
		align: "top",
	},
	{
		content: "<span>The video is ended</span>",
		start: "ended",
		end: "play",
		class: "my-css-class overlayD",
		align: "bottom-right",
	},
	{
		content: "<span>The video is 0-40</span>",
		start: 0,
		end: 40,
		class: "my-css-class overlayB",
		align: "top-left",
	},
	{
		content: "<span>The video is 15-30</span>",
		start: 15,
		end: 30,
		class: "my-css-class overlayC",
		align: "bottom-left",
	},
];

Here, you can find all the options:

If you want to simply show a full-player overlay, seta custom css class and overlay css properties.

Methods

This is a list of all public methods for player instance.

Events and errors handling

You can access player events like a jQuery "on" / "off" method. Replace "eventname" with one of the following names. Props means the elements passed through callback.

player.on("eventname", (evt, ...props) => {
	/*...do something*/
});

Here, you can find all the events:

Contributors

• Thanks to video.js for base library
• Thanks to videojs-http-source-selector for videojs http source selector component
• Thanks to videojs-seek-buttons for videojs seek buttons
• Thanks to videojs-overlay for videojs overlay library