🚨 Shai-Hulud Strikes Again:834 Packages Compromised.Technical Analysis →
Socket
Book a DemoInstallSign in
Socket

@ividjs/ivid

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ividjs/ivid

interactive video wrapper

latest
Source
npmnpm
Version
1.0.7
Version published
Weekly downloads
18
5.88%
Maintainers
1
Weekly downloads
 
Created
Source

ivid-logo

IVID

< interactive video player >


npm-published vanillajs webcomponents-publised

license-apache-2 donate


About

IVID is an interactive video player for modern browsers.

Full VanillaJS webcomponent. Plug-n-play ready, easy setup and use.

Try it online.


How to use it

<!doctype html>
<html>
  <head>
    <script src="//unpkg.com/@ividjs/ivid@latest/dist/ivid.min.js" type="module" async></script>
    <!-- Optional Styles -->
    <link href="//unpkg.com/@ividjs/ivid@latest/dist/ivid.min.css" rel="stylesheet">
    <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <script async>
      let model = { ... }; // Setup the video-map model
      document.getElementById("sample").setAttribute("model", JSON.stringify(model));
    </script>
  </head>

  <body>
    <i-video id="sample" controls autoplay playsinline></i-video>
  </body>
</html>

Also see: IVID-model and IVID-styles documentation


Features

  • Next video selection (the interactive bit)
  • Simple single-setup: ivid-model
  • Inherited HTML5 video properties
  • Full video controls on-screen
  • Customizable controls: ivid-styles
  • Key-mapping for keyboard video controls
    • Play/Pause: spacebar
    • Mute/Unmute: m
    • Fullscreen toggle: f
    • Volume up/down: arrow_up / awrrow_down
    • Forward/backward: arrow_right / arrow_left

Please take a look at the current TODO list, any contribution is welcome


Development setup

Clone ivid

git clone git@github.com:ividjs/ivid.git

Install development dependencies

npm i # or yarn

Run development server

npm run dev

Open browser on localhost:3000, the sandbox should be ready to play


Screenshots

player controls

choices controls

Keywords

ivid

FAQs

Package last updated on 30 Jan 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts