Add the following script on your HTML:
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/clappr/latest/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>
means that the support is made by an external plugin.
You can use the latest published version at https://cdn.jsdelivr.net/clappr/latest/clappr.min.js
Plugin |Status|Compatible with latest Clappr|URL| ---------------|---|---|---|---|--- Thumbnails on seekbar| Ready | Yes | https://github.com/tjenkinson/clappr-thumbnails-plugin Markers | Ready | Yes | https://github.com/tjenkinson/clappr-markers-plugin Level Selector| Ready | Yes | https://github.com/clappr/clappr-level-selector-plugin 360 videos| Ready | Yes | https://github.com/thiagopnts/video-360 Chromecast| Ready | Yes | https://github.com/clappr/clappr-chromecast-plugin DASH with shaka| Ready | Yes | https://github.com/clappr/dash-shaka-playback RTMP | Ready | Yes | https://github.com/clappr/clappr-rtmp-plugin HLS+P2P | Ready | WIP | http://bem.tv Comments on seekbar| Ready | ? | http://labs.jordane.net/clappr-comment/ Voice control| Ready | ? | https://github.com/flavioribeiro/clappr-speech-control-plugin Dash | WIP | No | https://github.com/shankardevy/clappr-dash-plugin Youtube | Ready | No | https://github.com/towerz/clappr-youtube-playback
All parameters listed below shall be added on Clappr.Player
object instantiation. Example:
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
parameter1: "value1",
parameter2: "value2",
});
You can set the player size setting width
and height
parameters.
You can specify where the player should be attached to using either the parentId
, or parent
option. parentId
should be the id of the element you would like the player to be inserted into, or parent
should be set to a reference to a dom element.
Add autoPlay: true
if you want the video to automatically play after page load.
Add loop: true
if you want the video to automatically replay after it ends.
Add chromeless: 'true'
if you want the player to act in chromeless mode.
Add mute: true
if you want to start player with no sound.
Add mimeType: "mimetype-for-media"
if you need to use a media url without extension.
Add actualLiveTime: true
if you want the time in the seek bar to be according to actual time.
Add actualLiveServerTime: "2015/11/26 06:01:03"
if you want the time in the seek bar to match with a specified time.
Add persistConfig: false
if you don't want to persist player's volume through your videos, by default it saves. These configuration are being saved at user's browser (through localStorage).
Add playbackNotSupportedMessage: 'Please try on a different browser'
to define a custom message to be displayed when a playback is not supported.
In case you're loading a on demand video (mp4), it's possible to define the way the video will be preloaded according to preload attribute options. Add preload: <type>
on embed parameters. By default, Clappr will try to download only video metadata (preload: 'metadata'
).
The default behavior for the HLS playback is to keep buffering indefinitely, even on VoD. This replicates the behavior for progressive download, which continues buffering when pausing the video, thus making the video available for playback even on slow networks. To change this behavior, add maxBufferLength: <value>
to embed parameters, where value
is in seconds.
Enable Google Analytics events dispatch (play/pause/stop/buffering/etc) adding your gaAccount
. Optionally, pass your favorite trackerName as gaTrackerName
. Example:
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
gaAccount: 'UA-44332211-1',
gaTrackerName: 'MyPlayerInstance'
});
Customize control bar colors adding mediacontrol
hash. Example:
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
mediacontrol: {seekbar: "#E113D3", buttons: "#66B2FF"}
});
Result:
I'm sure you can do better than me.
If you want to disable media control auto hide, add hideMediaControl: false
in your embed parameters.
When embedded with width less than 320, volume bars are hidden. You can force this behavior for all sizes by adding hideVolumeBar: true
.
Put watermark: http://url/img.png
on your embed parameters to automatically add watermark on your video. Choose corner position by defining position parameter. Positions can be bottom-left
, bottom-right
, top-left
and top-right
. Example:
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
watermark: "http://url/img.png", position: 'top-right'
});
Define a poster by adding poster: http://url/img.png
on your embed parameters. It will appear after video embed, disappear on play and go back when user stops the video.
Clappr has a native statistics plugin that accounts QoE metrics such playing time, rebuffering time, total rebuffers, etc. Metrics report happens periodically, learn how to access these numbers on Create your own plugin session.
By default if the URL contains a time then the media will seek to this point. E.g. example.com?t=100 would start the media at 100 seconds in.
To disable this add autoSeekFromUrl: false
.
Add disableVideoTagContextMenu: true
to disable the context menu (right click) on the HTML5 video element (in the case where a HTML5 playback is used).
Clappr is under heavy development but production-ready. Feel free to open issues and send us pull requests.
You can find it here.
The project is on npm at https://www.npmjs.com/package/clappr
npm install clappr --save-dev
You should specify the base url for where the assets are located using the baseUrl
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 of the assets (in the dist folder) to be accessible at "http://example.com/assets/clappr".
You need to arrange for the assets to be located at baseUrl
during your build process.
Installing for webpack
By default webpack will look at the browser
field in package.json
and use the built version of the project. If this is all you want there is nothing else for you to do.
If you would like to build the project yourself into your project during your build process then add the following to your webpack config:
resolve: {
alias: { Clappr: 'clappr/src/main.js' },
root: [path.resolve(__dirname, 'node_modules/clappr/src')],
extensions: ['', '.js'],
}
Installing for browserify
Browserify will look at the browser
field in package.json
and use the built verison of the project.
Then enter the project directory and install the dependencies:
npm install
Make your changes and run the tests:
npm test
Build your own version:
npm run build
Check the result on dist/
folder.
Starting a local server:
npm run start
This command will start a HTTP Server on port 8080, you can check a sample page with Clappr on http://localhost:8080/webpack-dev-server/
Please, try to follow this to open new bugs (questions, suggestions and others are welcome)
For the issue title: A meaningful title (like: HLS doesn't work at windows 10). Try to avoid helpless title (like: it doesn't work, IE10, bug, problem)
Be sure to:
- Reproduce the bug at http://cdn.clappr.io/
- Search for similar open/closed issues on this matter before open a new one.
For the issue body:
Browser: YOUR BROWSER (ex: Chrome Version 46.0.2490.80, Firefox, IE)
OS: YOUR OS (ex: Mac OS 10.11.1, iOS9, android4.5)
Clappr Version: 0.2.25
Steps to reproduce:
- first step
- then second step
- I was expecting X but instead it shows Y
ps: you can attach images, logs or whatever you think might be helpful.
The culprits of this project are listed here.
In general, we follow the fork-and-pull git workflow:
- Fork the repository on GitHub
- Commit changes to a branch in your fork
- Pull request "upstream" with your changes
- Merge changes in to "upstream" repository