The Clappr recommended in this issue is an extensible web media player.
Clappr is an extensible web media player. Your architecture is primarily projected into plug-ins, which are designed to add low coupling to your project and make it easy to add unlimited functionality.
Clappr uses HTMLVideoElement by default to guarantee support for many platforms. You can extend the default HTML5 playback or playback interface to create a new media support, just like a plugin!
HTMLVideoElement Address:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement
Usage of Clappr
Tags via script:
Add the following script to your HTML:
< head>
< script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@clappr/player@latest/dist/clappr.min.js"> < /script>
< /head> Now, create the player:
<body>
<div id="player"></div>
<script>
var player = new Clappr.Player({source: "http://your.video/here.mp4", parentId: "#player"});
</script>
</body>Through the npm module:
The project is available on npm at
https://www.npmjs.com/package/@clappr/core
yarn install @clappr/core --save-devYou should specify the base URL baseUrl where the asset is located with the following option:
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
baseUrl: "http://example.com/assets/clappr"
}); In the above case, Clappr will expect all assets (in the dist folder) to be available in the”
Visit http://example.com/assets/clappr-core “. You need baseUrl to arrange the assets to be located during the build process.
Install for webpack:
By default, webpack will look at this main field package.json and use the build version of the project. If that’s what you want, then there’s nothing left for you to do.
If you want to build Clappr itself into your project during the build process, add the following to your webpack configuration:
resolve: {
alias: { Clappr: '@clappr/core/src/main.js' },
root: [path.resolve(__dirname, 'node_modules/@clappr/core/src')],
extensions: ['', '.js'],
}API documentation
player.attachTo(element)
You can use this method to attach the player to a given element. You don’t need to do this when parentId is specified during the instantiation of the player that passes the parameter.
player.play()
Play the current source.
player.pause()
Pause the current source.
player.stop()
Stop the current source.
player.mute()
Mute the current source.
player.unmute()
Unmute the current source.
player.seek(value)
Find the current video (source). For example, player.seek(120) will search until the 120th second (2 minutes) of the current video.
player.seekPercentage(value)
Find the current video (source). For example, player.seek(50) will look for the middle of the current video.
player.isPlaying()
true Returns if the current source is playing, otherwise false.
player.getPlugin(pluginName)
Returns the plug-in instance. Example:
var strings = player.getPlugin('strings'); This method searches the Core and Container plug-ins by name and returns the first one found.
player.getCurrentTime()
Returns the current time in seconds of the current source.
player.getDuration()
Returns the duration of the current source in seconds.
player.resize(size)
Resize the current player canvas. The size argument should be width, a text object with heightand. Example:
player.resize({height: 360, width: 640}); player.destroy()
Destroy current player and remove it from DOM.
player.load(source)
Load new source.
player.configure(options)
allows the player to be configured after it has been created.
Clappr configuration
All parameters listed below should be added to the Clappr.Player object instantiated or via player.configure.
Example:
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
parameter1: "value1",
parameter2: "value2",
});
// or
player.configure({
parameter3: "value3",
parameter4: "value4",
})Note that some options through configure are not applied immediately. In this case, these options will be applied in the next video.
Clappr plug-in
Media control
A plugin that renders the interface on the video container and adds the possibility to control playback operations (play, pause, stop).
Click Pause
Adds the possibility to switch between play/ play states by clicking on a container element.
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
// Optionally, send a payload upon the container's pausing with the `onClickPayload` parameter
clickToPauseConfig: {
onClickPayload: { any: 'any' } // sends the payload to container when clicked
}); Hidden subtitles
Adds the possibility of custom subtitle labels and titles.
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
closedCaptionsConfig: {
title: 'Subtitles', // default is none
ariaLabel: 'Closed Captions', // Default is 'cc-button'
labelCallback: function (track) { return track.name }, // track is an object with id, name and track properties (track is TextTrack object)
},
});Poster
Define the poster image by adding the poster option to the Clappr player. It appears after the video is embedded, disappears during playback, and returns when the user stops the video. For audio broadcasts, the poster remains visible while playing.
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
poster: "http://url/img.png"
}); Find time
Notifies the current time when the mouse hovers over the media control search bar.
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
// Only for live stream with DVR
actualLiveTime: true, // default is false
// Meant to be used with actualLiveTime
actualLiveServerTime: "2015/11/26 06:01:03" // default is current date
}); Watermark
Add a watermark to the video. Place the watermark option on your embed parameter to automatically add a watermark to your video. Select the corner position by defining the Position option. The positions can be bottom-left, bottom-right, and top-left. top-right To define the URL to open when you click the watermark, use watermarkLinkoption. If watermarkLink does not define parameters, the watermark is not clickable.
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
watermark: "http://url/img.png",
position: 'top-right',
watermarkLink: "http://example.net/"
}); —END—
