VideoCocoon is a JavaScript API wrapper for video platforms that support an iFrame API. Its purpose is to simplify development with JavaScript video APIs.
- Demo
- Installation
- Usage
- Options
- Methods
- Events
- Player Object
- API References
- Video Providers
- Browser Support
- License
View a demo illustrating the usage of VideoCocoon.
npm i video-cocoon --save
yarn add video-cocoon
VideoCocoon comes with multiple files that can be loaded asynchronously:
- VideoCocoon core
- Provider Implementations
- YouTube
- Vimeo
<script type="text/javascript" src="src/script/video-cocoon.js"></script>
<script type="text/javascript" src="src/script/provider/youtube.js"></script>
<script type="text/javascript" src="src/script/provider/vimeo.js"></script>
Alternatively, you may include a bundled version in your project.
<script type="text/javascript" src="src/script/video-cocoon-bundled.js"></script>
Define the HTML object to be used as the target for the iFrame embed (The target
option defaults to <body/>
):
<div id="youtube-video-example" class="video" data-src="https://www.youtube.com/watch?v=_QqfifH3-rk"></div>
Utilize the VideoCocoon.init
method to create a new player.
<script type="text/javascript">
var player = VideoCocoon.init({
target: document.getElementById('youtube-video-example')
});
</script>
VideoCocoon.init
will return a player object. This object can be referenced to interact with the player:
<script type="text/javascript">
player.play();
</script>
target
(String | Node) - Default<body/>
- A selector string or DOM object used to specify where the iFrame is to be embedded.
src
(String)- The video source URL to be parsed for iFrame embedding.
- The
src
option can also be implemented via adata-src
attribute on thetarget
element - The custom for source URLs is to utilize the URL used to view the video on the provider's platform.
- The
- The video source URL to be parsed for iFrame embedding.
class
(Object)frame
(String)- CSS class applied to iFrame element
events
(Object)- Object for registering callback events upon player initialization. See the events section for available events.
params
(Object)
Methods are registered directly on the player object.
play
pause
stop
seek
toggle
- Toggles the play/pause player status
on(name, callback)
trigger(name)
Native provider methods can be accessed from the player
property of the player object:
Callbacks are registered on a player object via the events
property. The player object is set as the scope for callback events.
VideoCocoon events:
onApiLoaded
- Called when the provider API associated with the player is loaded
onFrameEmbed
- Called when the iFrame created for the player is embedded in the DOM
onPlayerInitialized
- Called when the player has finished being initialized
API provider native events:
A player object instance is returned when initializing a video via the VideoCocoon.init
method. All the player instances are stored in the players
property of the VideoCocoon
object (VideoCocoon.players
).
Refer to the methods section to see available methods on a player instance.
Other properties available on a player instance:
events
(Object)- Object that holds all of the callback events registered on a player.
frame
(Node)- The
<iframe/>
DOM element created for the embedded video
- The
options
(Object)- The options applied to the player instance
player
(Object)- The API instance returned from the video provider's API
src
(String)- The original source URL
The following references were used for API implementations
Currently supported video providers include
- YouTube
- Vimeo
Refer to the video provider documentation for information regarding implementing a new video provider.
- VideoCocoon
- The newest feature used is the
Function.prototype.bind()
method. Refer to the browser compatibility chart provided by the Mozilla Developer documentation.
- The newest feature used is the
- Providers
VideoCocoon is licensed under the MIT License. Go wild and make awesome things :)