tessl/npm-mediaelement

HTML5 video and audio player with unified cross-browser interface and extensive customization options

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

MediaElement.js

Name: tessl/npm-mediaelement
Author: tessl

MediaElement.js is a comprehensive HTML5 video and audio player library that provides a unified interface across different browsers and devices. It offers both a core media wrapper and a complete player with customizable controls, supporting IE11+, MS Edge, Chrome, Firefox, Safari, iOS 8+ and Android 4.0+.

Package Information

Package Name: mediaelement
Package Type: npm
Language: JavaScript
Installation: npm install mediaelement

Core Imports

import MediaElementPlayer from 'mediaelement';

// Or import specific components
import { MediaElement, MediaElementPlayer } from 'mediaelement';

For CommonJS:

const MediaElementPlayer = require('mediaelement');

// Or destructure
const { MediaElement, MediaElementPlayer } = require('mediaelement');

For CDN/Browser:

<script src="https://cdn.jsdelivr.net/npm/mediaelement@7.0.7/build/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mediaelement@7.0.7/build/mediaelementplayer.min.css">

Basic Usage

import MediaElementPlayer from 'mediaelement';

// Initialize player on an existing video/audio element
const player = new MediaElementPlayer('my-video', {
  // Configuration options
  stretching: 'responsive',
  features: ['playpause', 'progress', 'current', 'duration', 'volume', 'fullscreen'],
  success: (mediaElement, originalNode, instance) => {
    console.log('Player initialized successfully');
  }
});

// Basic playback control
player.play();
player.pause();
player.setCurrentTime(30);
player.setVolume(0.8);

Architecture

MediaElement.js is built around several key components:

MediaElement: Core media wrapper that provides HTML5-compatible API for various media formats
MediaElementPlayer: Complete player with controls, theming, and advanced features
Renderer System: Pluggable architecture supporting HTML5, HLS, DASH, YouTube, Vimeo, and more
Feature System: Modular controls system allowing custom player features
Configuration System: Extensive options for customizing player behavior and appearance
Utility Functions: Helper methods for DOM manipulation, media detection, and time formatting

Capabilities

Core Media Element

Low-level media element wrapper providing HTML5-compatible API with renderer switching capabilities. Essential for custom player implementations.

class MediaElement {
  constructor(idOrNode, options, sources);
  
  // HTML5 MediaElement compatible properties
  src: string;
  currentTime: number;
  duration: number;
  volume: number;
  muted: boolean;
  paused: boolean;
  ended: boolean;
  
  // HTML5 MediaElement compatible methods
  play(): Promise<void> | void;
  pause(): void;
  load(): void;
  canPlayType(type: string): string;
}

Core Media Element

Media Player

Complete media player with controls, theming, and extensive configuration options. Main class for most use cases.

class MediaElementPlayer {
  constructor(node, options);
  
  // Player control methods
  play(): void;
  pause(): void;
  stop(): void;
  setCurrentTime(time: number): void;
  setVolume(volume: number): void;
  setMuted(muted: boolean): void;
  enterFullScreen(): void;
  exitFullScreen(): void;
  
  // Properties
  media: MediaElement;
  options: PlayerOptions;
  controls: HTMLElement;
  container: HTMLElement;
}

Media Player

Configuration System

Comprehensive configuration options for customizing player behavior, appearance, and features.

interface PlayerOptions {
  // Media and poster
  poster?: string;
  showPosterWhenEnded?: boolean;
  showPosterWhenPaused?: boolean;
  
  // Dimensions
  defaultVideoWidth?: number;
  defaultVideoHeight?: number;
  videoWidth?: number;
  videoHeight?: number;
  
  // Features and controls
  features?: string[];
  alwaysShowControls?: boolean;
  hideVideoControlsOnLoad?: boolean;
  
  // Advanced options
  stretching?: 'auto' | 'fill' | 'responsive' | 'none';
  enableKeyboard?: boolean;
  pauseOtherPlayers?: boolean;
}

Configuration

Renderer System

Pluggable renderer architecture supporting multiple media formats and streaming protocols.

interface Renderer {
  name: string;
  options: RendererOptions;
  canPlayType(type: string): '' | 'maybe' | 'probably';
  create(mediaElement: MediaElement, options: any, mediaFiles: any[]): any;
}

// Available renderers
const renderers = ['html5', 'hls', 'dash', 'youtube', 'vimeo', 'dailymotion', 'soundcloud'];

Renderer System

Utility Functions

Helper functions for DOM manipulation, media type detection, time formatting, and browser feature detection.

// DOM utilities
function hasClass(el: HTMLElement, className: string): boolean;
function addClass(el: HTMLElement, className: string): void;
function removeClass(el: HTMLElement, className: string): void;

// Media utilities
function getTypeFromFile(url: string): string;
function formatType(url: string, type: string): string;

// Time utilities
function secondsToTimeCode(time: number, forceHours: boolean, showFrameCount: boolean, fps: number): string;

Utility Functions

Feature System

Modular system for adding custom controls and player features with standardized lifecycle methods.

// Feature interface pattern
interface Feature {
  build(player: MediaElementPlayer, controls: HTMLElement, layers: HTMLElement, media: MediaElement): void;
  clean?(player: MediaElementPlayer, layers: HTMLElement, controls: HTMLElement, media: MediaElement): void;
}

// Built-in features
const features = ['playpause', 'current', 'progress', 'duration', 'tracks', 'volume', 'fullscreen'];

Feature System

Global Namespace

// Global mejs namespace
interface MejsGlobal {
  version: string;
  MediaElement: typeof MediaElement;
  MediaElementPlayer: typeof MediaElementPlayer;
  html5media: Html5MediaConfig;
  Features: FeatureDetection;
  Utils: UtilityFunctions;
  i18n: Internationalization;
  Renderers: RendererManager;
}

// Available as window.mejs
declare global {
  interface Window {
    mejs: MejsGlobal;
    MediaElement: typeof MediaElement;
    MediaElementPlayer: typeof MediaElementPlayer;
  }
}