vds-elements - ALPHA: Video player framework for the web

  •        2

Spec-compliant customizable, extensible, accessible and universal media elements. The successor to Vime 5.x and Plyr 3.x. This pre-release is not yet feature complete or API stable. Please use at your own risk until the stable release is available. Issues are welcome for unexpected changes.

https://elements.vidstack.io
https://github.com/vidstack/vds-elements

Dependencies:

@types/fscreen : ^1.0.1
@types/hls.js : ^0.13.3
fscreen : ^1.2.0
just-debounce-it : ^1.5.0
just-throttle : ^2.3.1

Tags
Implementation
License
Platform

   




Related Projects

vime - Customizable, extensible, accessible and framework agnostic media player

  •    TypeScript

Vime is a customizable, extensible, accessible and framework agnostic media player. The examples below are using web components but there are bindings for React, Vue, Svelte, Stencil and Angular. If you want to see how they look check out our Demo.

react-player - A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion

  •    Javascript

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion. Not using React? No problem. The component parses a URL and loads in the appropriate markup and external SDKs to play media from various sources. Props can be passed in to control playback and react to events such as buffering or media ending. See the demo source for a full example.

react-media-player - React audio and video player.

  •    Javascript

Components and decorators to help build video & audio players in React. Supports HTML5, Youtube, and Vimeo media types. A special wrapper component that collects information from the Player component and passes down the proper props to withMediaProps decorator.

Videojs - HTML5 & Flash video player

  •    Javascript

Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through plugins). It supports video playback on desktops and mobile devices. It is an extendable framework/library around the native video element. It unifies the native video API across browsers.

wired-elements - Collection of custom elements that appear hand drawn

  •    TypeScript

Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look. The package (wired-elements) exports all components in the wired category. List of all wired elements can be found here.


wired-elements - Collection of elements that appear hand drawn. Great for wireframes.

  •    Javascript

Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look. The elements are drawn with enough randomness that no two renderings will be exactly the same - just like two separate hand drawn shapes.

clappr - :clapper: An extensible media player for the web.

  •    Javascript

Test it at cdn.clappr.io. You can re-use some vendors used internally, for instance you can use Kibo through Clappr.Vendor.Kibo.

lit-element-starter-ts - Sample component project using LitElement with TypeScript

  •    Javascript

This project includes a sample component using LitElement with TypeScript. This sample uses the TypeScript compiler to produce JavaScript that runs in modern browsers.

lit - Lit is a simple library for building fast, lightweight web components.

  •    Javascript

Lit is a simple library for building fast, lightweight web components. At Lit's core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that's tiny, fast and expressive.

RKTabView - Easy applicable toolbar/tabbar component for iOS

  •    Objective-C

RKTabView provides the opportunity to create toolbars with customizable behavior, functions and appearance. Standard iOS components such as UITabBar or UIToolbar sometimes are not customizable as needed and always behave in a certain way. Unlike them, this component can be installed anywhere, anytime, but the most important thing - all elements appearance and behavior can differ. Imagine, that part of bar should work as UITabBar(one is on - others are off), elements of second part should work as switchers(any element can be turned on or off independently), third part - ordinary buttons. All this can be done with RKTabView. Create elements of 3 types: * Excludable element(Same as UITabBar elemets. One is on - others are off) * Unexludable element (can be turned on or off independently) * Button element (work as ordinary button) To do this, use one of 3 initialization methods. Initialization method require element images for "enabled" and "disabled" states. "Button element" initialization method requires target and selector in addition.

hls.js - JavaScript HLS client using Media Source Extension

  •    Javascript

hls.js is a JavaScript library which implements an HTTP Live Streaming client. It relies on HTML5 video and MediaSource Extensions for playback. hls.js does not need any player, it works directly on top of a standard HTML<video>element.

react-video - 🎞 React component to load video from Vimeo or Youtube across any device.

  •    Javascript

A pretty good and effective way to create a video placeholder from Youtube or Vimeo using a high-res image. If you don't know, when an <iframe> is rendered from browser, it blocks its parse because it isn't a non-blocking script. This isn't so good to your user, no?. With this react component, the <iframe> just will be loaded when the user click on play. NOTICE: You need just one thing to make the component work. Put the base component style at the <header> tag. If you don't wanna use the .css extension, you can get the .styl or .scss extension at the folder ./lib.

react-soundplayer - 📻 Create custom web audio players with React

  •    Javascript

Create highly-customizable SoundCloud (or any audio) players with React.js. It is also easy to built players without using SoundCloud API. You just need to pass audio source via streamUrl and all other necessary track meta information can be passed as custom props. Also you can choose preloadType, according to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#Attributes, by default this property is equal to 'auto'.

react-tunnels - 🚇 Render React components in placeholders that are placed somewhere else in the component tree

  •    Javascript

Render React components in placeholders that are placed somewhere else in the component tree. There is a common use case in React apps where you want to define a Layout where the content of some elements is defined by children components. For example, you want to define Layout just once and reuse it for every page but it has a breadcrumb whose steps depend on children components. This tiny library allows you to define tunnels to render from an element to whatever another element in the App, even elements located on top of the tree. It's like Portal but the target is a component instead of a DOM element.

react-native-root-siblings - A sibling elements manager.

  •    Javascript

Add sibling elements after your app root element. The created sibling elements are above the rest of your app elements. This can be used to create a Modal component or something should be over your app. This library can add element above the root app component registered by AppRegistry.registerComponent.

vue-lit - Proof of concept custom elements "framework"

  •    Javascript

Proof of concept mini custom elements framework powered by @vue/reactivity and lit-html. The "framework" itself is just ~70 lines of code and the two libraries weigh in at ~6kb min + brotli combined. The API is almost identical to Vue Composition API, but defines native custom elements underneath.

Kurento - Media Server responsible for media transmission, processing, loading and recording

  •    C++

Kurento Media Server is Kurento's core element. It is responsible for media transmission, processing, loading and recording. It is implemented in low level technologies based on GStreamer to optimize the resource consumption. It supports Networked streaming protocols, including HTTP, RTP and WebRTC, Group communications (MCUs and SFUs functionality) supporting both media mixing and media routing/dispatching.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.