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

Compare commits

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

No commits in common. "944f53553267ef2096a9fae8720a4debee9ecb4c" and "f7bbe71cb8739d2875608f69fc055a9603c001ee" have entirely different histories.
944f535532 ... f7bbe71cb8

3 changed files with 35 additions and 128 deletions
Show Stats Expand all files Collapse all files

31
.sass-lint.yml
View File

@ -1,6 +1,6 @@
# Linter Options
options:
merge-default-rules: false
merge-default-rules: true
formatter: checkstyle
output-file: 'build/checkstyle.xml'
files:
@ -28,6 +28,7 @@ rules:
convention: none
no-warn: 1
no-debug: 1
no-ids: 0
no-important: 2
hex-notation:
- 1
@ -37,25 +38,13 @@ rules:
- 2
-
size: 2
property-sort-order:
no-qualifying-elements:
- 1
-
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
allow-element-with-attribute: true
allow-element-with-class: true
allow-element-with-id: true
no-transition-all:
- 2
-
include: false

86
README.md
View File

@ -1,85 +1,3 @@
# Metaunix-Player.js
# 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
<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
An HTML/Javascript video player

46
src/sass/mup.sass
View File

@ -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
margin-top: -2.4px
background: $main-color
border: none
border-radius: $slider-thumb-border-radius
box-shadow: -100px 0 0 90px $main-color
background: $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
background: $main-color
border: none
border-radius: $slider-thumb-border-radius
box-shadow: 0 0 0 $shadow-color, 0 0 0 $shadow-color
background: $main-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
background: $main-color
border: none
border-radius: $slider-thumb-border-radius
box-shadow: 0 0 0 $shadow-color, 0 0 0 $shadow-color
background: $main-color
cursor: pointer
&:focus