Open source video player for HTML sites
Go to file
Gregory Ballantine 944f535532 Updated readme
2018-05-02 10:52:46 -04:00
src More code-style cleanup 2018-04-11 17:37:37 -04:00
.gitignore Removed index.html from the git ignore file for testing 2018-02-26 17:10:19 -05:00
.sass-lint.yml More code-style cleanup 2018-04-11 17:39:23 -04:00
Gruntfile.js Added Gruntfile for compiling SASS and CoffeeScript files 2018-02-26 17:09:00 -05:00
index.html Added an MP4 video file link in the example/test HTML file 2018-02-26 17:38:48 -05:00
LICENSE Updated the project license 2018-02-27 22:45:46 -05:00
package-lock.json Added SASS Lint tool to the dev dependencies 2018-04-11 10:21:08 -04:00
package.json Added SASS Lint tool to the dev dependencies 2018-04-11 10:21:08 -04:00
README.md Updated readme 2018-05-02 10:52:46 -04:00

Metaunix-Player.js

An HTML/Javascript video player - built as a jQuery plugin for easy use. The idea behind this project was to create an HTML5 video player that was very configurable and allowed for dynamic updates on a real website.

Getting Started

Below you will learn how to get ready for an use this project.

Prerequisites

Production

You simply need to include <script> tags that point to jQuery and a copy of the compiled Javascript files.

Development

You will need node.js installed on your machine to compile assets and run tests. You will need to install the Grunt CLI package with npm install -g grunt-cli. The rest of the tools required should be easily installed by running npm install

The list of tools installed will be:

  • Grunt
  • Grunt plugins for:
    • Sass
    • CoffeeScript
    • Time (tracks how much time each task takes to run)
    • Watch (for automatically re-running compilation steps)
  • Sass-lint

Usage

Production

Using this in a production environment (e.g. on a website), you will need to include this script, as stated above, create an HTML element, and then call the plugin in a second script, for example:

<html>
<head>
  <title>My Site</title>
  <script src="https://cdn.example.com/path/to/jQuery"></script>
  <script src="https://cdn.example.com/path/to/player.js"></script>
</head>
<body>
  <div class="my-player" />

  <script>
    $('.my-player').MUPlayer({
      'use_default_css': true,
      'video_width': '720px',
      'video_sources': [
        {
          'link': 'http://techslides.com/demos/sample-videos/small.ogv',
          'type': 'video/ogg',
        },
        {
          'link': 'http://techslides.com/demos/sample-videos/small.mp4',
          'type': 'video/mp4',
        }
      ]
    });
  </script>
</body>
</html>

Development

Assuming you have the grunt-cli NPM package installed, cd to a clone of this repository and run grunt. The SASS and CoffeeScript assets should now compile, and you can use the provided index.html file for local testing.

Contributing

If you notice anything about this project that could be improved, feel free to open up an Issue, clone this repository and create a Pull Request with those changes, or shoot me an email at gballantine555@gmail.com.

Please, please, PLEASE be as detailed as possible if you notice any bugs or have feature requests. Copy the error/console output, suggest a possible way to implement a feature, give me something so I'm trying to tackle an issue blindly!

Versioning

I will use SemVer for versioning this project - right now there are no versions available, but when I feel this project is ready to be used in any capacity, I'll start tagging releases.

Authors

  • Gregory Ballantine - Gitea

License

This project is licensed under the "Simplified" BSD License (aka BSD 2-Clause License) - see the LICENSE file for details