Compare commits
5 Commits
f7bbe71cb8
...
944f535532
| Author | SHA1 | Date | |
|---|---|---|---|
|
944f535532 | ||
|
|
b2bcf49e64 | ||
|
|
b43f470103 | ||
|
|
d104e9be1f | ||
|
|
5e8fba0fdb |
@ -1,6 +1,6 @@
|
||||
# Linter Options
|
||||
options:
|
||||
merge-default-rules: true
|
||||
merge-default-rules: false
|
||||
formatter: checkstyle
|
||||
output-file: 'build/checkstyle.xml'
|
||||
files:
|
||||
@ -28,7 +28,6 @@ rules:
|
||||
convention: none
|
||||
no-warn: 1
|
||||
no-debug: 1
|
||||
no-ids: 0
|
||||
no-important: 2
|
||||
hex-notation:
|
||||
- 1
|
||||
@ -38,13 +37,25 @@ rules:
|
||||
- 2
|
||||
-
|
||||
size: 2
|
||||
no-qualifying-elements:
|
||||
property-sort-order:
|
||||
- 1
|
||||
-
|
||||
allow-element-with-attribute: true
|
||||
allow-element-with-class: true
|
||||
allow-element-with-id: true
|
||||
no-transition-all:
|
||||
- 2
|
||||
-
|
||||
include: false
|
||||
order:
|
||||
- display
|
||||
- float
|
||||
- width
|
||||
- height
|
||||
- margin
|
||||
- margin-top
|
||||
- margin-right
|
||||
- margin-bottom
|
||||
- margin-left
|
||||
- padding
|
||||
- padding-top
|
||||
- padding-right
|
||||
- padding-bottom
|
||||
- padding-left
|
||||
- background
|
||||
- border
|
||||
- border-radius
|
||||
ignore-custom-properties: true
|
||||
|
||||
86
README.md
86
README.md
@ -1,3 +1,85 @@
|
||||
# metaunix-player-js
|
||||
# Metaunix-Player.js
|
||||
|
||||
An HTML/Javascript video player
|
||||
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
|
||||
<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](http://semver.org/) 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](https://git.metaunix.net/gballan)
|
||||
|
||||
## License
|
||||
|
||||
This project is licensed under the "Simplified" BSD License (aka BSD 2-Clause License) - see the LICENSE file for details
|
||||
|
||||
@ -16,21 +16,21 @@ $slider-thumb-border-radius: 15px
|
||||
|
||||
//# styles
|
||||
.mup-video
|
||||
vertical-align: top
|
||||
width: 100%
|
||||
margin: 0
|
||||
padding: 0
|
||||
vertical-align: top
|
||||
|
||||
&:focus,
|
||||
&:active
|
||||
outline: none
|
||||
|
||||
.mup-controls
|
||||
vertical-align: top
|
||||
white-space: nowrap
|
||||
padding: 5px
|
||||
background: $background-color-dark
|
||||
overflow: auto
|
||||
vertical-align: top
|
||||
white-space: nowrap
|
||||
|
||||
input:focus
|
||||
outline: none
|
||||
@ -104,24 +104,24 @@ $slider-thumb-border-radius: 15px
|
||||
&::-webkit-slider-runnable-track
|
||||
width: 100%
|
||||
height: 10px
|
||||
background: $slider-track-color
|
||||
border: none
|
||||
border-radius: 25px
|
||||
box-shadow: 0 0 0 $shadow-color, 0 0 0 $shadow-color
|
||||
cursor: pointer
|
||||
animate: 0.2s
|
||||
box-shadow: 0 0 0 $shadow-color, 0 0 0 $shadow-color
|
||||
background: $slider-track-color
|
||||
border-radius: 25px
|
||||
border: none
|
||||
overflow: hidden
|
||||
|
||||
&::-webkit-slider-thumb
|
||||
box-shadow: -100px 0 0 90px $main-color
|
||||
border: none
|
||||
width: $slider-thumb-width
|
||||
height: $slider-thumb-height
|
||||
border-radius: $slider-thumb-border-radius
|
||||
margin-top: -2.4px
|
||||
background: $main-color
|
||||
border: none
|
||||
border-radius: $slider-thumb-border-radius
|
||||
box-shadow: -100px 0 0 90px $main-color
|
||||
cursor: pointer
|
||||
-webkit-appearance: none
|
||||
margin-top: -2.4px
|
||||
|
||||
&:focus::-webkit-slider-runnable-track
|
||||
background: $slider-track-color
|
||||
@ -130,12 +130,12 @@ $slider-thumb-border-radius: 15px
|
||||
&::-moz-range-track
|
||||
width: 100%
|
||||
height: 10px
|
||||
background: $slider-track-color
|
||||
border: none
|
||||
border-radius: 25px
|
||||
box-shadow: 0 0 0 $shadow-color, 0 0 0 $shadow-color
|
||||
cursor: pointer
|
||||
animate: 0.2s
|
||||
box-shadow: 0 0 0 $shadow-color, 0 0 0 $shadow-color
|
||||
background: $slider-track-color
|
||||
border-radius: 25px
|
||||
border: none
|
||||
|
||||
&::-moz-range-progress
|
||||
height: 100%
|
||||
@ -143,24 +143,24 @@ $slider-thumb-border-radius: 15px
|
||||
border-radius: $slider-thumb-border-radius
|
||||
|
||||
&::-moz-range-thumb
|
||||
box-shadow: 0 0 0 $shadow-color, 0 0 0 $shadow-color
|
||||
border: none
|
||||
width: $slider-thumb-width
|
||||
height: $slider-thumb-height
|
||||
border-radius: $slider-thumb-border-radius
|
||||
background: $main-color
|
||||
border: none
|
||||
border-radius: $slider-thumb-border-radius
|
||||
box-shadow: 0 0 0 $shadow-color, 0 0 0 $shadow-color
|
||||
cursor: pointer
|
||||
|
||||
//# Microsoft browser styles for range
|
||||
&::-ms-track
|
||||
width: 100%
|
||||
height: 10px
|
||||
cursor: pointer
|
||||
animate: 0.2s
|
||||
background: transparent
|
||||
border-color: transparent
|
||||
border-width: 39px 0
|
||||
color: transparent
|
||||
cursor: pointer
|
||||
animate: 0.2s
|
||||
|
||||
&::-ms-fill-lower,
|
||||
&::-ms-fill-upper
|
||||
@ -173,12 +173,12 @@ $slider-thumb-border-radius: 15px
|
||||
background: $slider-thumb-color
|
||||
|
||||
&::-ms-thumb
|
||||
box-shadow: 0 0 0 $shadow-color, 0 0 0 $shadow-color
|
||||
border: none
|
||||
width: $slider-thumb-width
|
||||
height: $slider-thumb-height
|
||||
border-radius: $slider-thumb-border-radius
|
||||
background: $main-color
|
||||
border: none
|
||||
border-radius: $slider-thumb-border-radius
|
||||
box-shadow: 0 0 0 $shadow-color, 0 0 0 $shadow-color
|
||||
cursor: pointer
|
||||
|
||||
&:focus
|
||||
|
||||
Loading…
Reference in New Issue
Block a user