Compare commits
5 Commits
f7bbe71cb8
...
944f535532
Author | SHA1 | Date | |
---|---|---|---|
|
944f535532 | ||
|
b2bcf49e64 | ||
|
b43f470103 | ||
|
d104e9be1f | ||
|
5e8fba0fdb |
@ -1,6 +1,6 @@
|
|||||||
# Linter Options
|
# Linter Options
|
||||||
options:
|
options:
|
||||||
merge-default-rules: true
|
merge-default-rules: false
|
||||||
formatter: checkstyle
|
formatter: checkstyle
|
||||||
output-file: 'build/checkstyle.xml'
|
output-file: 'build/checkstyle.xml'
|
||||||
files:
|
files:
|
||||||
@ -28,7 +28,6 @@ rules:
|
|||||||
convention: none
|
convention: none
|
||||||
no-warn: 1
|
no-warn: 1
|
||||||
no-debug: 1
|
no-debug: 1
|
||||||
no-ids: 0
|
|
||||||
no-important: 2
|
no-important: 2
|
||||||
hex-notation:
|
hex-notation:
|
||||||
- 1
|
- 1
|
||||||
@ -38,13 +37,25 @@ rules:
|
|||||||
- 2
|
- 2
|
||||||
-
|
-
|
||||||
size: 2
|
size: 2
|
||||||
no-qualifying-elements:
|
property-sort-order:
|
||||||
- 1
|
- 1
|
||||||
-
|
-
|
||||||
allow-element-with-attribute: true
|
order:
|
||||||
allow-element-with-class: true
|
- display
|
||||||
allow-element-with-id: true
|
- float
|
||||||
no-transition-all:
|
- width
|
||||||
- 2
|
- height
|
||||||
-
|
- margin
|
||||||
include: false
|
- 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
|
//# styles
|
||||||
.mup-video
|
.mup-video
|
||||||
vertical-align: top
|
|
||||||
width: 100%
|
width: 100%
|
||||||
margin: 0
|
margin: 0
|
||||||
padding: 0
|
padding: 0
|
||||||
|
vertical-align: top
|
||||||
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active
|
&:active
|
||||||
outline: none
|
outline: none
|
||||||
|
|
||||||
.mup-controls
|
.mup-controls
|
||||||
vertical-align: top
|
|
||||||
white-space: nowrap
|
|
||||||
padding: 5px
|
padding: 5px
|
||||||
background: $background-color-dark
|
background: $background-color-dark
|
||||||
overflow: auto
|
overflow: auto
|
||||||
|
vertical-align: top
|
||||||
|
white-space: nowrap
|
||||||
|
|
||||||
input:focus
|
input:focus
|
||||||
outline: none
|
outline: none
|
||||||
@ -104,24 +104,24 @@ $slider-thumb-border-radius: 15px
|
|||||||
&::-webkit-slider-runnable-track
|
&::-webkit-slider-runnable-track
|
||||||
width: 100%
|
width: 100%
|
||||||
height: 10px
|
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
|
cursor: pointer
|
||||||
animate: 0.2s
|
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
|
overflow: hidden
|
||||||
|
|
||||||
&::-webkit-slider-thumb
|
&::-webkit-slider-thumb
|
||||||
box-shadow: -100px 0 0 90px $main-color
|
|
||||||
border: none
|
|
||||||
width: $slider-thumb-width
|
width: $slider-thumb-width
|
||||||
height: $slider-thumb-height
|
height: $slider-thumb-height
|
||||||
border-radius: $slider-thumb-border-radius
|
margin-top: -2.4px
|
||||||
background: $main-color
|
background: $main-color
|
||||||
|
border: none
|
||||||
|
border-radius: $slider-thumb-border-radius
|
||||||
|
box-shadow: -100px 0 0 90px $main-color
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
-webkit-appearance: none
|
-webkit-appearance: none
|
||||||
margin-top: -2.4px
|
|
||||||
|
|
||||||
&:focus::-webkit-slider-runnable-track
|
&:focus::-webkit-slider-runnable-track
|
||||||
background: $slider-track-color
|
background: $slider-track-color
|
||||||
@ -130,12 +130,12 @@ $slider-thumb-border-radius: 15px
|
|||||||
&::-moz-range-track
|
&::-moz-range-track
|
||||||
width: 100%
|
width: 100%
|
||||||
height: 10px
|
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
|
cursor: pointer
|
||||||
animate: 0.2s
|
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
|
&::-moz-range-progress
|
||||||
height: 100%
|
height: 100%
|
||||||
@ -143,24 +143,24 @@ $slider-thumb-border-radius: 15px
|
|||||||
border-radius: $slider-thumb-border-radius
|
border-radius: $slider-thumb-border-radius
|
||||||
|
|
||||||
&::-moz-range-thumb
|
&::-moz-range-thumb
|
||||||
box-shadow: 0 0 0 $shadow-color, 0 0 0 $shadow-color
|
|
||||||
border: none
|
|
||||||
width: $slider-thumb-width
|
width: $slider-thumb-width
|
||||||
height: $slider-thumb-height
|
height: $slider-thumb-height
|
||||||
border-radius: $slider-thumb-border-radius
|
|
||||||
background: $main-color
|
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
|
cursor: pointer
|
||||||
|
|
||||||
//# Microsoft browser styles for range
|
//# Microsoft browser styles for range
|
||||||
&::-ms-track
|
&::-ms-track
|
||||||
width: 100%
|
width: 100%
|
||||||
height: 10px
|
height: 10px
|
||||||
cursor: pointer
|
|
||||||
animate: 0.2s
|
|
||||||
background: transparent
|
background: transparent
|
||||||
border-color: transparent
|
border-color: transparent
|
||||||
border-width: 39px 0
|
border-width: 39px 0
|
||||||
color: transparent
|
color: transparent
|
||||||
|
cursor: pointer
|
||||||
|
animate: 0.2s
|
||||||
|
|
||||||
&::-ms-fill-lower,
|
&::-ms-fill-lower,
|
||||||
&::-ms-fill-upper
|
&::-ms-fill-upper
|
||||||
@ -173,12 +173,12 @@ $slider-thumb-border-radius: 15px
|
|||||||
background: $slider-thumb-color
|
background: $slider-thumb-color
|
||||||
|
|
||||||
&::-ms-thumb
|
&::-ms-thumb
|
||||||
box-shadow: 0 0 0 $shadow-color, 0 0 0 $shadow-color
|
|
||||||
border: none
|
|
||||||
width: $slider-thumb-width
|
width: $slider-thumb-width
|
||||||
height: $slider-thumb-height
|
height: $slider-thumb-height
|
||||||
border-radius: $slider-thumb-border-radius
|
|
||||||
background: $main-color
|
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
|
cursor: pointer
|
||||||
|
|
||||||
&:focus
|
&:focus
|
||||||
|
Loading…
Reference in New Issue
Block a user