Plays videos with performance.
Tested on IE11 but it should work IE10+.
With npm
npm i @hayatbiralem/video-player -S
You can download the latest version or checkout all the releases here.
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.
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.
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.
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><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
<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
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
In short .o-video-player object will transform and produce your video with performance and support IE10+.
Clone this repo, go to the project directory and install dependencies with
npm installand rebuild dist folder with
npm run dev
npm run prod
npm run build # alias of prod- Add to the npm directory.
In lieu of a formal style guide, take care to maintain the existing coding style.