We The Curious Developers

We The Curious Developers

  • Guidelines
  • CuriOs SDK
  • Software
  • Films
  • Art
  • Audio
  • Photography

›Components

Getting Started

  • Getting Started Overview
  • ClI
  • Working With Us

Technical

  • Hardware

Frames

  • Frames Overview
  • Info Panel
  • Media Browser
  • Touch to Start

Components

  • Components Overview
  • Box
  • Button
  • Card
  • Checkbox
  • Header
  • Heading
  • Hero
  • Icon
  • Text Input
  • Markdown Viewer
  • Modal
  • WTCProvider
  • Table
  • Text
  • Video Player
  • Calendar
  • Dropdown
  • InputAutoComplete
  • Radio
  • Sidebar
  • Slider
  • Notification
  • IconNavButton
  • IconSideBar
  • List
  • Tab
  • Title
  • Toggle
  • Value

Video Player component

A responsive themed video player component based on https://cookpete.com/react-player/.

Install

npm i @wethecurious/wtc-ui-library

Usage

Import it into your project

import { VideoPlayer } from '@wethecurious/wtc-ui-library'

Basic Implementation

Accepts a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion. Supports m3u8.

<VideoPlayer
  videoUrl="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
  width={640}
  height={360}
/>

Controls

Vimeo, Twitch and Wistia player will always display controls from external SDK

Autoplay

As of Chrome 66, videos must be muted in order to play automatically. Some players, like Facebook, cannot be unmuted until the user interacts with the video, so you may want to enable controls to allow users to unmute videos themselves

Custom Aspect Ratio

Include the aspect ratio and exclude height to force the player to constrain to an aspect ratio

<VideoPlayer
  videoUrl="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
  isPlaying={false}
  width={640}
  aspectRatio={[1, 1]}
/>

Responsive player

Include the aspect ratio and exclude width/height to automatically fit to container

<VideoPlayer
  videoUrl="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
  isPlaying={false}
  aspectRatio={[16, 9]}
/>
PropDescriptionDefault
videoUrlThe video url to play
isPlayingSet true to enable autoplay
widthSet the width (in pixels) of the player. Exclude to fit to container
heightSet the height (in pixels) of the player.
aspectRatioSet the aspect ratio of the player[16, 9]
audioLevelSets the audio level between 0 and 1
posterUrlSets the poster url which shows whilst the player loads
isShowClosedCaptionsSet to true or false to toggle display of closed captionsfalse
captionsAn object containing the captions including {kind, src, srcLang}
onPlayCallback function when player plays
onPauseCallback function when player pauses-100
onSeekCallback function when player seeks
styleAdd additional css styles
Last updated on 5/7/2019
← TextCalendar →
  • Install
  • Usage
  • Basic Implementation
    • Controls
    • Autoplay
  • Custom Aspect Ratio
  • Responsive player
Docs
Getting Started (or other categories)Guides (or other categories)API Reference (or other categories)
Community
User ShowcaseStack OverflowProject ChatTwitter
More
BlogGitHubStar
Copyright © 2020 We The Curious