Metaunix/metaunix-player-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Metaunix:f7bbe71cb8739d2875608f69fc055a9603c001ee
Branches Tags
Metaunix:main
..
compare: Metaunix:944f53553267ef2096a9fae8720a4debee9ecb4c
Branches Tags
Metaunix:main

5 Commits
f7bbe71cb8 ... 944f535532

Author SHA1 Message Date
Gregory Ballantine
944f535532 Updated readme 2018-05-02 10:52:46 -04:00
Gregory Ballantine
b2bcf49e64 More code-style cleanup 2018-04-11 17:39:23 -04:00
Gregory Ballantine
b43f470103 More code-style cleanup 2018-04-11 17:37:37 -04:00
Gregory Ballantine
d104e9be1f Removed sass lint default rules - I will specify new rules as I need them 2018-04-11 17:31:01 -04:00
Gregory Ballantine
5e8fba0fdb Updated sass lint rules 2018-04-11 17:26:50 -04:00
3 changed files with 128 additions and 35 deletions
Show Stats Expand all files Collapse all files

31
.sass-lint.yml
View File

@ -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
View File

@ -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

46
src/sass/mup.sass
View File

@ -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