Best jQuery Video & Audio Plugins & Tutorials with Demo

ckin : HTML5 Video Player using Javascript

ckin : HTML5 Video Player using Javascript

ckin is a opensource lightweight HTML5 Video Player using Javascript (No jQuery).

cPlayer : A beautiful and clean WEB Music Player by HTML5

cPlayer : A beautiful and clean WEB Music Player by HTML5

cPlayer is a beautiful and clean WEB Music Player by HTML5.

Features:

  • Lyrics display
  • Playlists
  • Three play modes, Single cycle, list loop, random play
  • Designed for touch devices
  • Modular Customizable
  • Media Session Support

GRT Youtube Popup – jQuery Plugin

GRT Youtube Popup - jQuery Plugin

GRT Youtube Popup is a simple and lightweight jQuery plugin for playing youtube embed videos in a popup.

Animate Images and Videos with curtains.js

Animate Images and Videos with curtains.js

curtains.js was created with just that issue in mind. It is a small vanilla WebGL javascript library that converts HTML elements containing images and videos into 3D WebGL textured planes, allowing you to animate them via shaders.
You can define each plane size and position via CSS, which makes it super easy to add WebGL responsive planes all over your pages.

Instacam : jQuery Instant Canvas Video Plugin

Instacam : jQuery Instant Canvas Video Plugin

Instacam is a jQuery plugin to perform instant canvas video through the WebRTC API with a fresh touch of CSS filters.The plugin is compatible with browser that natively support the HTML5 canvas tag, requestAnimationFrame API, HTMLMediaElement API, navigator.mediaDevicesand Promises API. The CSS filtering requires the CSS filter features to properly work.

AlphaTab : Music notation & Guitar Tablature rendering Library

AlphaTab : Music notation & Guitar Tablature rendering Library

AlphaTab is a cross platform music notation and guitar tablature rendering library.

You can use alphaTab within your own website or application to load and display music sheets from data sources like Guitar Pro or the built in markup language named alphaTex.

Features:

  • load GuitarPro 3-5, GuitarPro 6, AlphaTex or MusicXML (experimental)
  • render as SVG, HTML5 canvas, GDI+,…
  • adapt to your responsive design by dynamic resizing
  • play the music sheet via HTML5 Web Audio API and Flash

jQuery Video Background Plugin

jQuery Video Background Plugin

jQuery plugin to show videos as a background of html elements.

JSMpeg : MPEG1 Video & MP2 Audio Decoder in JavaScript

JSMpeg : MPEG1 Video & MP2 Audio Decoder in JavaScript

JSMpeg is a Video Player written in JavaScript. It consists of an MPEG-TS demuxer, MPEG1 video & MP2 audio decoders, WebGL & Canvas2D renderers and WebAudio sound output. JSMpeg can load static videos via Ajax and allows low latency streaming (~50ms) via WebSockets.

JSMpeg can decode 720p Video at 30fps on an iPhone 5S, works in any modern browser (Chrome, Firefox, Safari, Edge) and comes in at just 20kb gzipped.

Sticky Ultimate Video Player with JavaScript

Sticky Ultimate Video Player with JavaScript

Sticky Ultimate Video Player is a powerful sticky video / audio player that can be positioned in a sticky form at the bottom or top part of the webpage over its content that can play local video (mp4) / audio (mp3), streaming videos or audios from a server, Youtube videos or Vimeo videos. It only requires the mp4 / mp3 format (the best and most used formats on the web) and it will work on mobile devices and desktop machines no matter which browser is used, this is made possible by incorporating multiple video engines in an really smart way inside the video player logic. Sticky Ultimate Video Player supports unlimited playlists and each playlist can have unlimited videos.

The playlists can be loaded from a simple HTML markupXML filemixed playlist (vimeo | youtube | HTML5 video / audio)video folder (mp4 files)audio folder (mp3 files)youtube playlist or vimeo playlist.

Creative Audio Visualizers with p5.js

Creative Audio Visualizers with p5.js

Today we’ll explore how to build a basic, line-style music visualization in the browser. We’ll be using p5.js for our drawings and its p5.sound library for analyzing sounds.