npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

laserdisc

v0.1.0

Published

Cool HTML5 Video wrapper with features like fullscreen stretch + crop

Downloads

75

Readme

laserdisc logo

LASERDISC

HTML5 Video Wrapper

WARNING: ALPHA RELEASE IN ACTIVE DEVELOPMENT. MOST OF THE FEATURES BELOW WORK, BUT SOME ARE STILL UNDER CONSTRUCTION. USE AT YOUR OWN RISK. BREAKING CHANGES WILL OCCUR UNTIL BETA RELEASE – WHICH WILL BE SOON

This is going to be the greatest video player of all time. At least, that is the plan. With that being said, it is only ever going to be in the semi-professional arena because that's where all the cool stuff on the web is happening. If you want a really professional, conservative thing, use video.js, which does a bunch of stuff. However, LASERDISC does a bunch of stuff too, including many features video.js does not, making it the cooler pick.

Setting up a LASERDISC sesh

npm install --save laserdisc

Grab the CSS file and dump into your HEAD:

https://s3.amazonaws.com/laserdisc-assets/laserdisc.css

//minified
https://s3.amazonaws.com/laserdisc-assets/laserdisc.min.css

Or via CDN:

http://dc6emjnxox7vk.cloudfront.net/laserdisc.min.css

Video Formats

WEBM and MP4 must be included. Furthermore, names must indicate video width using the following convention: 'video/my_video_960.mp4'

video/
  my_video_640.mp4,
  my_video_640.webm,
  my_video_960.webm,
  my_video_960.mp4,
  my_video_1280.webm,
  my_video_1280.mp4
  etc...

Example setup

HTML

<div class="someclassname" id="someid"
  data-source="data/your_video_with_no_file_extension"
  data-poster="data/yourposter.jpg"
></div>

JS

//import module
import LaserDisc from 'laserdisc';

//grab all the vids to turn into laserdiscs
const laserTarget = document.getElementById("someid")

//render
const options = {};
const item = new LaserDisc(lasersTarget, options);

Styling + DOM

LASERDISC exposes several classes to use and style at will. By default, all videos will be responsive.

Note: Laserdisc will replace the provided DOM node with the following DOM structure


.laser-outer-wrap
  .laser-inner-wrap
    .laser-poster-wrap
    .laser-video

Options

You can pass a lot of options and stuff to LaserDisc.

const options = {
  
  //Screen size ratio. Options '16:9', '4:3'
  ratio: '16:9',
  
  //widths of video files. If no sizes
  // are specified, then only data-source will be used.
  // Again, please make not of the naming convention
  // that is required for videos. Do not append file extensions
  sizes: [280,640,960,1280,1920],
  
  //default true
  loop: true,
  
  //default false
  controls: false,
  
  //default true
  muted: true,
  
  //default false
  autoplay: false,
  
  //default false. video will toggle play/pause on clicks
  clickToPlay: false,
  
  //default false. video will toggle play/pause on mouseenter, mouseleave
  hoverToPlay: false,
  
  //default false. Will display PNG over video until played
  showPlayButton: false,
  
  //CALLBACKS
  
  //called when video has begun loading
  onload: function(ev){
  },

  //called when video info is in. Before any seek events, make sure 
  // this has been hit
  onLoadedMetaData: function(){

  },
  
  //video has loaded enough frames to begin playing
  onCanPlay: function(ev){
  },
  
  //video is playing
  onPlay: function(ev){
  },
  
  //video is paused
  onPause: function(ev){
  },
  
  //end is over (please note: this event will only fire if 'loop' option is set to FALSE)
  onEnd: function(ev){
  },
  
  //onError
  onError: function(err){
  },
  
  //called on default browser schedule when video progress
  // is made
  onTimeUpdate: function(ev){
  },

  //Can be used if you want to handle clicks
  // manually. This callback will fire (if specified/passed in like below)
  // regardless of whether clickToPlay options is set to true
  // or not.
  onClick: function(ev){

  },


  //Called when duration of video updates.
  // This happens either when video is loaded
  // and duration data exists
  onDurationChange: function(ev){

  }
};

Methods

There are also these.

const item = new LaserDisc(laser[i], options);

//play function. Can optionally pass in time in seconds to
// begin at that moment
item.play();

item.pause();

item.mute();

item.unmute();

//float between 0.0 (muted) and 1.0 (full volume)
item.setVolume(level);

//jump to point
item.seekTo(timeInSeconds);

//Remove all event listeners and remove container
item.destroy();

//Manual load. You probably won't need this much.
item.load();

//Pass in new video and reload. Optional (recommended) array of sizes.
// Make sure to follow naming convention.
item.swap(newFile, [640, 960, 1280, 1920]);

//set volume (between 0.0 and 1.0);
item.setVolume(newVolumeFloat);

Properties

item.duration;

//retrieve current time of video (in seconds)
// note: this is not the same as setting 
// currentime directly on video
item.currentTime;

//retrieve current volume
item.volume;

Cool logo by Stephanie Davidson