video-player
Plays videos with performance.
Browser Support
Tested on IE11 but it should work IE10+.
Installation
With npm
npm i @hayatbiralem/video-player -S
You can download the latest version or checkout all the releases here.
Usage
Browser
You can import this plugin into your project as follows:
<link href="path/to/video-player.css" rel="stylesheet">
<script src="path/to/video-player.js"></script>
<!-- Optional -->
<link href="path/to/vimeo-play.css" rel="stylesheet">
<link href="path/to/youtube-play.css" rel="stylesheet">
.. and you're ready to go.
Webpack
If you want to import the plugin with your webpack build you can do it by:
import "video-player";
You should look at sass-loader
implementation on webpack documentation.
Refresh
You can process new dynamic contents by calling:
window.processVideoPlayer();
or in Webpack way:
import processVideoPlayer from "video-player/src/js/utils/process";
processVideoPlayer();
Only new ones will be processed.
Examples
By default video player object only contains scaffolding styles so we don't include any cosmetic styles in default but we prepared some for play icons.
<div class="o-video-player" data-url="YOUTUBE_OR_VIMEO_URL">
<div class="o-video-player__play">
<!-- your play icon will be here -->
</div>
</div>
Youtube
<div class="o-video-player" data-url="https://www.youtube.com/watch?v=aKJvbTEnp0I">
<div class="o-video-player__play">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="#f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg>
</div>
</div>
See the example on CodePen
Vimeo
<div class="o-video-player" data-url="https://vimeo.com/189662684">
<div class="o-video-player__play">
<button type="button" class="c-vimeo-play"></button>
</div>
</div>
See the example on CodePen
Resets Automatically
When you use multiple video instance at the same page and when you try to play second video, previously playing video resets itself automatically.
See the example on CodePen
Summary
In short .o-video-player
object will transform and produce your video with performance and support IE10+.
Development
Clone this repo, go to the project directory and install dependencies with
npm install
and rebuild dist folder with
npm run dev
npm run prod
npm run build # alias of prod
TODO
- [ ] Add to the npm directory.
Contributors
Contributing
In lieu of a formal style guide, take care to maintain the existing coding style.