Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
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

  • 1.0.7
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
166
decreased by-6.74%
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

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc