Setup
Create the Video
You can create the video tag in this way:
<video id="testVideo" src="https://www.youtube.com/watch?v=L-bV7f7GC1I" width="500px" height="600px"></video>- The id attribute will be used to transform the video tag in a Widro player
- The src attribute is used to set the video to play (can also be a link to a YouTube video)
- Set width and height if you want, Widro will use them
Import Widro
You can import Widro's source files from an hosted link or by copying the widro.js file in your project folder. For example:
<!-- Import Widro from hosted link -->
<script src="https://widro.netlify.com/dist/widro.js"></script>
<!-- Import Widro from a file in your project -->
<script src="./path/widro.js"></script>Use Widro
Instantiate the Widro class by doing this:
const player = new Widro("#testVideo");Where #testVideo is the selector to the video tag element
Import css files
The last step is to import the Widro's css files for styling the player. Also here, like how you imported the widro source file you can use to methods, using an hosted link or by copying the css files in your project folder.
<!-- Import css files from hosted link -->
<link rel="stylesheet" href="https://widro.netlify.com/dist/widro.css"></link>
<link rel="stylesheet" href="https://widro.netlify.com/dist/themes/default/default-theme.css"></link>
<!-- Import Widro from a file in your project -->
<link rel="stylesheet" href="./path/widro.css"></link>
<link rel="stylesheet" href="./path/default-theme.css"></link>Extra setup
Node.js
You can also use Widro with Node.js, it's easy to load Widro with:
npm install widro
React
Not released yet, but it's under development a React component for the Widro player.
Examples
If you want to see how Widro look like you can find a Demo here, or you can copy this example below and test it yourself:
<html>
<head>
<title>Widro test</title>
<!-- Include Widro source file -->
<script src="https://widro.netlify.com/dist/widro.js"></script>
<!-- Include Widro css file -->
<link rel="stylesheet" href="https://widro.netlify.com/dist/widro.css"></link>
<link rel="stylesheet" href="https://widro.netlify.com/dist/themes/default/default-theme.css"></link>
<script>
// Wait until the content of the page is loaded
document.addEventListener("DOMContentLoaded", () => {
// Create the Widro player
const player = new Widro("#testVideo");
});
</script>
</head>
<body>
<video id="testVideo" src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4" width="500px" height="600px">
</body>
</html>Methods
List of the methods you can use on the Widro player:
| Method | Parameters | Description |
|---|---|---|
changeVideo(src) |
- src: the source of the new video |
|
togglePlay() |
||
toggleFullScreen() |
||
toggleMute() |
||
isFullScreen() |
||
requestFullScreen() |
||
exitFullScreen() |
||
on(event, callback) |
- event: the event to listen- callback: the function to call when the event is fired |
|
once(event, callback) |
- event: the event to listen- callback: the function to call when the event is fired |
|
off(event, callback) |
- event: the event to remove- callback: the function to remove |
|
onKey(key, callback, options) |
- key: the key to listen- callback: the function to call when the key is pressed/released- options: - |
|
isMuted() |
||
getCurrentTime() |
||
getDuration() |
||
getVolume() |
||
setVolume() |
||
seek(time) |
- time: the time to set |
|
isYouTube() |
||
isHTML5() |
||
isReady() |
||
isPlaying() |
||
getBufferingTime() |
About Widro
Build with
- Native Javascript ES6
- Native CSS