@pluginjs/video
Advanced tools
A flexible modern video js plugin.
npm i @pluginjs/video
yarn add @pluginjs/video
Webpack && Rollup:
ECMAScript Modules
import video from "@pluginjs/video"
CommonJS
require("@pluginjs/video")
CDN: Development:
<script src="/path/to/video.js"></script>
<link rel="stylesheet" href="/path/to/video.css">
Production:
<script src="/path/to/video.min.js"></script>
<link rel="stylesheet" href="/path/to/video.min.css">
HTML:
<body>
<div class="element"></div>
</body>
JS:
Pj.Video('.element', options);
// or jquery way
$('.element').plugin('Video', options);
Options are called on video instances through the video options itself. You can also save the instances to variable for further use.
Example
$('.element').plugin('Video', {
template: "foo"
})
or use dataset
<div class="element" data-template="foo"></div>
<script>
$('.element').plugin('Video')
</script>
| Name | Description | Default |
|---|---|---|
"template" | Main structure template | function() {...} |
"templates" | Template blocks | {} |
"url" | Video url | `` |
"id" | Video id | `` |
"type" | Different video sources, such as HTML5 Youtube Vimeo | `` |
"autoplay" | Whether to play automatically when loading video | true |
"loop" | Whether to loop the video | true |
"controls" | Whether to show the video controller | false |
"poster" | Whether to display the poster | `` |
Events are called on video instances through the video events itself. You can also save the instances to variable for further use.
| Name | Description |
|---|---|
"ready" | Gets fired when plugin is ready |
"destroy" | Gets fired when plugin is destroy |
"load" | Gets fired when video is loading |
"loaded" | Gets fired when video is loaded |
"play" | Gets fired when video is play |
"pause" | Gets fired when video is pause |
"stop" | Gets fired when video is stop |
"playend" | Gets fired when video is playend |
"playerr" | Gets fired when video is playerr |
example:
$video.plugin('Video', {
onReady: function() {
// code...
}
})
$video.on(
'video:ready',
function(){
// code...
}
)
Methods are called on video instances through the video method itself. You can also save the instances to variable for further use.
| Name | Description |
|---|---|
"enable" | Enabled plugin if plugin is disabled |
"disable" | Disable plugin |
"destroy" | Destroy plugin |
"pause" | Pause video |
"load" | Load video |
"play" | Play video |
"stop" | Stop video |
"volume" | Set the video volume |
example:
$video.plugin('Video', value)
$video.plugin('Video', value, "foo")
$video.plugin('Video', value, "foo", "bar")
| Name | Description | Default |
|---|---|---|
"NAMESPACE" | Declare plugin namespace | pj-video |
"THEME" | Declare plugin theme | {namespace}--{theme} |
"POSTER" | Declare plugin poster | {namespace}-poster |
Tested on all major browsers.
 |  |  |  |  |  |
|---|---|---|---|---|---|
| Latest ✓ | Latest ✓ | Latest ✓ | Latest ✓ | >=10 ✓ | Latest ✓ |
As a jQuery plugin, you also need to see the jQuery Browser Support.
See Contribution.md.
To see the list of recent changes, see Releases section.
Version: 0.2.1
Copyright (C) 2017 Creation Studio Limited.
Licensed under the GPL-v3 license.
FAQs
A flexible modern video js plugin.
The npm package @pluginjs/video receives a total of 15 weekly downloads. As such, @pluginjs/video popularity was classified as not popular.
We found that @pluginjs/video demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.