Skip to content

A simple web component custom element for playing through a list of video or audio elements

Notifications You must be signed in to change notification settings

heff/x-playlist

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

<x-playlist>

A simple web component custom element for playing through a list of video and/or audio elements.

Demo

Check it live!

Install

Install the component using Bower:

$ bower install x-playlist --save

Or download as ZIP.

Usage

  1. Import Web Components' polyfill:

    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
  2. Import Custom Element:

    <link rel="import" href="bower_components/x-playlist/src/x-playlist.html">
  3. Start using it!

    <x-playlist>
        <video src="my_video_1.mp4" controls preload="none">
        <video src="my_video_2.mp4" controls preload="none">
        <audio src="my_audio_1.mp3" controls preload="none">
    </x-playlist>

Options

Attribute Options Default Description
loop boolean false Loop back to the first media at the end

Methods

Method Parameters Returns Description
previous() None. Nothing. Play the previous media element
next() None. Nothing. Play the next media element

Development

In order to run it locally you'll need to fetch some dependencies and a basic server setup.

  • Install Bower & Grunt:

    $ [sudo] npm install -g bower grunt-cli
  • Install local dependencies:

    $ bower install && npm install
  • To test your project, start the development server and open http://localhost:8000.

    $ grunt server
  • To provide a live demo, send everything to gh-pages branch.

    $ grunt deploy

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

History

For detailed changelog, check Releases.

License

MIT License

About

A simple web component custom element for playing through a list of video or audio elements

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published