@toth.adam.straxus/react-plyr-with-captions

    1.0.3 • Public • Published

    ReactPlyr Video Component

    license

    A React video component based on Plyr.

    Installation

    Add react-plyr into your package.json dependencies:

    npm install @toth.adam.straxus/react-plyr-with-captions --save

    CSS

    Include the plyr.css stylsheet into your <head>

    <link rel="stylesheet" href="path/to/plyr.css">

    If you want to use our CDN (provided by Fastly) for the default CSS, you can use the following:

    <link rel="stylesheet" href="https://cdn.plyr.io/3.5.2/plyr.css">

    Usage

    Simple Youtube or Vimeo video

    import Plyr from 'react-plyr-with-captions';
     
    // add the component in the render function
    render() {
      return (
        <Plyr
          type="youtube" // or "vimeo"
          videoId="CDFN1VatiJA"
        />
      )
    }

    Note: The videoId can either be the video ID or URL for the media.

    Props

    Prop Default
    enable Disable true
    title Custom media title ""
    debug Logging to console false
    autoplay Auto play (if supported) false
    autopause Only allow one media playing at once (vimeo only) true
    seekTime Default time to skip when rewind/fast forward 10
    volume Default volume 1
    muted Default volume (0) false
    duration Pass a custom duration null
    displayDuration Display the media duration on load in the current time position
    If you have opted to display both duration and currentTime, this is ignored
    true
    invertTime Invert the current time to be a countdown true
    toggleInvert Clicking the currentTime inverts it's value to show time left rather than elapsed true
    ratio Aspect ratio (for embeds) "16:9"
    clickToPlay Click video container to play/pause true
    hideControls Auto hide the controls true
    resetOnEnd Reset to start when playback ended false
    disableContextMenu Disable the standard context menu true
    loadSprite Sprite (for icons) true
    iconPrefix Sprite (for icons) "plyr"
    iconUrl Sprite (for icons) "https://cdn.plyr.io/3.3.5/plyr.svg"
    blankVideo Blank video (used to prevent errors on source change) "https://cdn.plyr.io/static/blank.mp4"
    quality Quality default { default: 576, options: [ 4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240, "default" ] }
    loop Set loops { loop: { active: false } }
    speed Speed default and options to display { selected: 1, options: [ 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2 ] }
    keyboard Keyboard shortcut settings { focused: true, global: false }
    tooltips Display tooltips { controls: false, seek: true }
    captions Captions settings { active: false, language: 'auto', update: false }
    fullscreen Fullscreen settings { enabled: true, fallback: true, iosNative: false }
    storage Local storage { enabled: true, key: 'plyr' }
    controls Default controls [ 'play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen' ]
    settings [ 'captions', 'quality', 'speed' ]
    i18n Localisation { restart: 'Restart', rewind: 'Rewind {seektime} secs', play: 'Play', pause: 'Pause', fastForward: 'Forward {seektime} secs', seek: 'Seek', played: 'Played', buffered: 'Buffered', currentTime: 'Current time', duration: 'Duration', volume: 'Volume', mute: 'Mute', unmute: 'Unmute', enableCaptions: 'Enable captions', disableCaptions: 'Disable captions', enterFullscreen: 'Enter fullscreen', exitFullscreen: 'Exit fullscreen', frameTitle: 'Player for {title}', captions: 'Captions', settings: 'Settings', speed: 'Speed', normal: 'Normal', quality: 'Quality', loop: 'Loop', start: 'Start', end: 'End', all: 'All', reset: 'Reset', disabled: 'Disabled', enabled: 'Enabled', advertisement: 'Ad' }
    urls URLs { vimeo: { sdk: 'https://player.vimeo.com/api/player.js', iframe: 'https://player.vimeo.com/video/{0}?{1}', api: 'https://vimeo.com/api/v2/video/{0}.json' }, youtube: { sdk: 'https://www.youtube.com/iframe_api', api: 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title))&part=snippet', poster: 'https://img.youtube.com/vi/{0}/maxresdefault.jpg,https://img.youtube.com/vi/{0}/hqdefault.jpg' }, googleIMA: { sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js' } }
    keys API keys { google: null }
    ads Advertisements plugin
    Register for an account here: http://vi.ai/publisher-video-monetization/
    { enabled: false, publisherId: '', tagUrl: '' }
    tracks []

    Support

    Please open an issue for support.

    Contributing

    Please contribute using Github Flow. Create a branch, add commits, and open a pull request.

    Install

    npm i @toth.adam.straxus/react-plyr-with-captions

    DownloadsWeekly Downloads

    4

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    65 kB

    Total Files

    7

    Last publish

    Collaborators

    • marktodor
    • nadaiviktor
    • straxus