twitch-player
v2.0.2
Published
A Typescript wrapper for the Twitch embeddable, interactive media player.
Downloads
2,672
Maintainers
Readme
twitch-player
About
twitch-player is a Typescript npm
package that provides an easy interaction with the
Twitch embeddable, interactive VOD and Clips player.
Currently, the Twitch Development team offers only Javacript support for embedding an interactive media player (see this link). When developing Web apps using Typescript (for example in Angular) it is pretty cumbersome to work with the provided script, without any types support.
Because of this I've released this package, which has the following features:
- easy setup using
npm install
:heavy_check_mark: - types support for Typescript :heavy_check_mark:
- tested with Angular :heavy_check_mark:
Setup
npm install
Can be easily installed using npm
:
npm i twitch-player
Updating index.html
(optional)
Currently, both JS scripts for the Twitch.Player
and Twitch.Embed
are static files inside package.
If you want to use the official Twitch versions you will have to append the following to your index.html
file:
<!-- Twitch script for the Twitch.Embed object -->
<script src="https://embed.twitch.tv/embed/v1.js"></script>
<!-- Twitch script for the Twitch.Player object -->
<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
How to use
Creating a new player instance
const player = TwitchPlayer.FromOptions('twitch-player', {
width: 1280,
height: 720,
video: '<video ID here>'
});
In this example, the first argument of the constructor (
twitch-player
), represents the identifier of thediv
element where the player will be displayed.The second argument holds all the initialization options for the player, including the width, height and video that will be played
For more information please visit the Twitch Developer Reference.
Creating a new Embed instance
const embed = new TwitchEmbed('twitch-player', {
width: 1280,
height: 720,
channel: '<channel ID here>',
layout: TwitchEmbedLayout.VIDEO_WITH_CHAT
});
The
TwitchEmbed
object can be used to embed everything, including the chat. It holds aTwitchPlayer
instance that can be accessed by callingembed.getPlayer()
For more information please visit the Twitch Developer Reference
Interacting with the player
- Skipping 10 seconds forward:
player.seek(player.getCurrentTime() + 10)
- Pausing:
player.pause()
- Changing volume:
player.setVolume(0.7)
Reacting to player events
player.addEventListener(TwitchPlayerEvent.PAUSE, () => {
console.log('paused');
});
player.addEventListener(TwitchPlayerEvent.PLAY, () => {
console.log('started');
});
Documentation
The documentation for all public classes, members and functions can be found here.
License
This project is available under the MIT license. See the LICENSE file for more information.