Skip to content

Latest commit

 

History

History
86 lines (57 loc) · 2.73 KB

snapshot.md

File metadata and controls

86 lines (57 loc) · 2.73 KB
Raw

Mediaelement Snapshot

Overview

Mediaelement Snapshot plugin creates a button in the player controls allows to take video snapshots with different image types (jpeg, png).

Installation

Download plugin files and place the js files after the main Mediaelement player js mediaelement-and-player.min.js file:

<!-- Include main mediaelement player file -->
<script src="/path/to/mediaelement-and-player.min.js"></script>
<!-- Include snapshot main plugin file -->
<script src="/path/to/snapshot/snapshot.min.js"></script>
<!-- Include snapshot Translation file -->
<script src="/path/to/snapshot/snapshot-i18n.js"></script>

Place plugin main CSS style after the main player stylesheet

<!-- Include main mediaelement player stylesheet file -->
<link rel="stylesheet" href="/path/to/mediaelementplayer.min.css">
<!-- Include snapshot main stylesheet file -->
<link rel="stylesheet" href="/path/to/snapshot/snapshot.min.css">

Add plugin keyword to the features list

features: [..., 'snapshot']

That's it !.

For more details about How to Install mediaelement plugin.

Usage

Initialize Snapshot plugin

var player = new MediaElementPlayer(document.querySelector('video'), {

  features:['play', 'playpause', volume', 'progress', 'snapshot', fullscreen'],

       snapType:'jpeg',
       snapQuality: 0.5, //half quality
       snapShot: true,
            
       snapSuccess: function(snap){
          console.log(snap.url); //return snap object
       },

       snapError: function(){
          console.log('you can not take snapshot while the player loading !');
       }
       
 });

API

Parameter Type Default Description
snapShot boolean true Either to save snapshot image locally (true) or not (false)
snapType string png Type of image pngor jpeg
snapWidth number Default video width Snapshot image width
snapHeight number Default video height Snapshot image height
snapQuality number or float 1 Snapshot image quality between 0 and 1
snapSuccess function() null success callback => (snapshot) accepts one parameter contains snapshot object
snapError function() null error callback() => () accepts no parameters

Support

Having trouble with this plugin? create an issue describing the problem that you have encountered.