Best jQuery Video & Audio Plugins & Tutorials with Demo

abcjs : JavaScript for Rendering Music Notation

abcjs : JavaScript for Rendering Music Notation

abcjs is a javascript library for rendering standard music notation in a browser.This library makes it easy to incorporate sheet music into your websites. You can also turn visible ABC text into sheet music on websites that you don’t own using a greasemonkey script, or change your own website that contains ABC text with no other changes than the addition of one javascript file. You can also generate MIDI files or play them directly in your browser.

Freezeframe.js : Library that Pauses Animated Gifs

Freezeframe.js : Library that Pauses Animated Gifs

Freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or triggered manually.

ArtPlayer : Modern HTML5 Video Player

ArtPlayer : Modern HTML5 Video Player

Artplayer.js is a modern and full featured HTML5 video player.

  • Support vtt and srt subtitles
  • Support video quality switching
  • Support for custom controllayercontextmenusetting
  • Support playback rateaspect ratioflipwindow fullscreen or web fullscreen adjustment
  • Support integration with other dependencies, like: flv.jshls.jsdash.jsshaka-playerwebtorrent
  • Support chrome native picture-in-picture mode, or custom picture-in-picture mode
  • Support thumbnails and highlight in the progress bar
  • Support to maintain the original video ratio, adaptive size
  • Support rich custom event monitoring, easy to expand
  • Support for internationalization of controls
  • Support for custom plugins
  • Support local video preview
  • Support subtitle time offset

Vidbacking : jQuery Video Background Plugin

Vidbacking : jQuery Video Background Plugin

Vidbacking is a small jQuery plugin to simplify the process of showing HTML5 video as background. You can use this for showing a video file or Youtube video on whole page background or to show the video as the background of a <div>, <section>, like elements.

Features:

  • Cross Browser Video Background Plugin.
  • Support mp4, webm video files.
  • Support Youtube video.
  • Very small file size (4kb total).
  • Easy to use.
  • Can be used for both page background or for an element background.
  • Image fallback when video not supported.
  • Pause video when out of viewport.
  • Multiple instances on same page possible.
  • Device friendly, responsive.

lem Youtube : jQuery wrapper for the Youtube API

lem Youtube : jQuery wrapper for the Youtube API

lem Youtube is a jQuery wrapper for the Youtube API.

Audio Recorder Polyfill

Audio Recorder Polyfill

MediaRecorder polyfill to record audio in Edge and Safari 11.

  • Spec compatible. In the future when all browsers will support MediaRecorder, you will just remove polyfill.
  • Small. 1 KB (minified and gzipped). No dependencies. It uses Size Limit to control size.
  • One file. In contrast to other recorders, this polyfill uses “inline worker” and don’t need a separated file for Web Worker.

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.