Thank you for purchase. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form on the link above.
Make sure you extract downloaded file from codecanyon, inside you will find file named: 'apmvp.zip'. This is the plugin file you upload in wordpress panel!
After you install plugin you will have to activate your license to start using the plugin.
To activate license you need to create account on the following link, where you will provide your PURCHASE CODE, and get TOKEN in return which you will then enter in plugin section to activate the plugin.
This is made to make sure customers use the license on a single project (as per Envato rules) and to help customers owning many licenses to easily track on which server licenses are being used.
Go to Shortcodes plugin menu and get shortcode (choose player and playlist for your shortcode):
Shortcode examples:
Load single mp4 video:
Load single mp4 video, encrypt url from page source, autoplay, hide playlist:
Load single mp4 video with multiple qualities and subtitles: (for each path you need same number of quality_title!)
Load multiple mp4 videos:
You can also combine player_id with multiple videos: (so your player settings come from player_id in admin and your videos from here)
Load video folder with mp4 files:
Load single 360 virtual reality mp4 video:
Supported is html5 audio format (mp3, wav, flac...).
Audio shortcodes:
Load single mp3 audio:
Load audio folder with mp3 files:
While audio plays there are several options to show in the player area:
1. Show image poster (define poster when adding audio files in playlist or directly in shortcode using poster="IMAGE_URL")
2. Play image slideshow (define slideshow images when adding audio files in playlist or directly in shortcode using slideshow_images="IMAGE_URL,IMAGE_URL2,IMAGE_URL3" slideshow_duration="10" slideshow_random="1" slideshow_pause_with_audio="1")
slideshow_images = list of image urls separated by comma slideshow_duration = How long to show each image in slideshow in seconds slideshow_random = Shuffle slideshow images (1 = true / 0 = false) slideshow_pause_with_audio = Wheater to pause slideshow while audio is paused (1 = true / 0 = false)
3. Use audio visualizer (define in Player manager or directly in shortcode using use_audio_equalizer="1")
Display images in player.
Image shortcodes:
Load single image:
Load image folder with images files:
Load single 360 image panorama:
Player supports playing virtual reality video and image panorama.
Load single 360 virtual reality mp4 video:
Load single 360 virtual reality HLS video:
VR video can be monoscopic (single screen) which is default or it can be stereoscopic (double screen). If you video is stereoscopic, add vrmode="stereoscopic" attribute:
Note that if device does not support stereoscopic mode, video will be played in monoscopic mode.
Load single 360 virtual reality stereoscopic mp4 video:
Load single 360 image panorama:
Available settings for panorama images:
Supported are Apple HLS and MPEG DASH live streams.
Example HLS:
Note: IOS currently does not support hls (m3u8) format so you need a backup mp4 video url if you want it to be playback on ios.
https://github.com/video-dev/hls.js#compatibility
Example DASH:
You can pass your own config parameters to hls
For example:
hlsConfig:{ maxFragLookUpTolerance: 0.25, liveSyncDurationCount: 3, liveMaxLatencyDurationCount: Infinity }
You can pass your own config parameters to dash
For example:
dashConfig:{ 'streaming': { 'stableBufferTime': stableBuffer, 'bufferTimeAtTopQualityLongForm': bufferAtTopQuality, 'abr': { 'minBitrate': { 'video': minBitrate }, 'maxBitrate': { 'video': maxBitrate }, 'limitBitrateByPortal': limitByPortal } } }
Check Offline image section if you want to display image when your stream is offline.
Youtube supports single videos, playlist, channel.
Youtube requires API key which needs to be entered in Global Settings / Credentails section:
Go here for the API key: https://console.developers.google.com and create new project, enable YouTube Data API, go to Credentials, create Browser key and enter API key.
Tutorial on how to create Youtube API key: Get youtube api key
API key is not needed if you are going to use only Youtube single videos which you can load without the need for API key using any of the following methods:
1. When adding videos in playlist, set Use without api option. This will play the video, but there will be no video title, thumbnail or descritpion unless you set it yourself when adding video.
2. Or, in Playlist options, use Get video details without api option. This will apply to all videos in playlist. But note that this is only possible for Youtube single videos. This will play the video, and retrieve video title, thumbnail.
Player support following features from Youtube: single videos, playlists and channels.
Youtube shortcode examples:
Load Youtube single video without API, provide your own video thumbnail, title and description:
Load Youtube single video, hide playlist:
Load Youtube multiple videos: (one or more videos spearated by comma)
Load multiple youtube single videos no api (no quota used):
Load Youtube playlist:
Load Youtube channel:
1. Vimeo requires API key, register new application: https://developer.vimeo.com/apps/new
3. Generate Access Token with Public and Private scope (copy token immediately while its still visible!).
4. Get Token
Enter Client Identifier, Client Secret and Access Token in Settings section:
API key is not needed if you are going to use only Vimeo single videos which you can load without the need for API key using one of the following methods:
1. When adding videos in playlist, set Use without api option.
2. Or, in Playlist options, use Get video details without api option. This will apply to all videos in playlist. But note that this is only possible for Vimeo single videos.
Vimeo supports single videos, group, channel, album (showcase), ondemand (collection), folder videos.
Vimeo shortcodes:
Load Vimeo single video without API (provide your own video thumbnail, title and description):
Load Vimeo single video, hide playlist:
Load Vimeo single video:
Load Vimeo single video with chromeless player (chromeless is only available for videos hosted by a Plus account or higher!):
Load multiple vimeo single videos no api:
Load Vimeo group, limit to 10 results:
Load Vimeo channel :
Load Vimeo user album:
Load Vimeo album: (without specifing username)
Load Vimeo user videos:
Load Vimeo collection / on demand:
Load Vimeo folder videos:
Note that chromeless player (custom skin) is only available for vimeo videos hosted by a Plus account or higher!
Vimeo does allow to remove player controls (and use custom skin) for video below that rank.You can upload folder of videos located in WordPress uploads directory or folder on some custom location your server.
Plugin creates mvp-file-dir folder inside Wordpress uploads directory which will be used for reading video files.
Place folder in wp-content/uploads/mvp-file-dir directory and enter folder name in field:
Place folder on some custom location your server and enter full url to your folder:
To get full url to your folder use locate_directory.php file located in (documentation / misc directory in plugin package). Copy this file to your custom directory, and open it in browser. You will get full url which you then enter in field.
Required folder organization needs to look like this:
video folder -- video1.mp4 -- video2.mp4 -- video3.mp4 poster folder (optional) -- video1.jpg -- video2.jpg -- video3.jpg thumb folder (optional) -- video1.jpg -- video2.jpg -- video3.jpg subtitles folder (optional) video1 folder //folder named the same as the video to which subtitles belong to! -- English.vtt //subtitle file -- German.vtt video2 folder -- English.vtt -- German.vtt video3 folder -- English.vtt -- German.vtt
We have main folder (called "video" in our example, this can be called anyhow). Inside "video" folder are videos, poster, thumb, subtitles folder. "poster", "thumb", "subtitles" folders are optional. Inside "poster" directory poster files are located, inside "thumb" directory thumbnails for the playlist are located. Inside "subtitles" folder, we have subtitles for each video.
Note: Equivalent video and poster/thumbnail file names need to be the same!
Copy "video" folder inside mvp-file-dir folder and enter "video" inside Playlist manager / Edit playlist section:
Poster and thumbnail images are optional and can be customized in Player manager / Edit player / General settings / Folder playlist tab.
Rules:
Multiple video qualities are not allowed when reading folders! So you cannot have for example (video1.mp4, video1_HD.mp4 inside a folder), this will simply be processed as different video, not different quality.
Required extension for video files is mp4. Required extension for poster and image thumbnails is jpg.
Required folder organization needs to look like this:
audio folder -- audio1.mp4 -- audio2.mp4 -- audio3.mp4 poster folder (optional) -- audio1.jpg -- audio2.jpg -- audio3.jpg thumb folder (optional) -- audio1.jpg -- audio2.jpg -- audio3.jpg subtitles folder (optional) audio1 folder //folder named the same as the audio to which subtitles belong to! -- English.vtt //subtitle file -- German.vtt audio2 folder -- English.vtt -- German.vtt audio3 folder -- English.vtt -- German.vtt
We have main folder (called "audio" in our example, this can be called anyhow). Inside "audio" folder are audio files, poster, thumb, subtitles folder. "poster", "thumb", "subtitles" folders are optional. Inside "poster" directory poster files are located, inside "thumb" directory thumbnails for the playlist are located. Inside "subtitles" folder, we have subtitles for each audio.
Note: Equivalent audio and poster/thumbnail file names need to be the same!
Poster and thumbnail images are optional and can be customized in Player manager / Edit player / General settings / Folder playlist tab.
Rules:
Multiple qualities are not allowed when reading folders! So you cannot have for example (audio1.mp3, audio1_320kbps.mp3 inside a folder), this will simply be processed as different audio, not different quality.
Required extension for audio files is mp3, wav. Required extension for poster and image thumbnails is jpg.
Required folder organization needs to look like this:
image folder -- image1.jpg -- image2.jpg -- image3.jpg thumb folder (optional) -- image1.jpg -- image2.jpg -- image3.jpg
We have main folder (called "image" in our example, this can be called anyhow). Inside "image" folder are images, thumb folder. "thumb" folders is optional. Inside thumb directory thumbnails for the playlist are located.
Note: Equivalent image and thumbnail file names need to be the same!
Thumbnail images are optional and can be customized in Player manager / Edit player / General settings / Folder playlist tab.
Rules:
Required extension for image files is jpg, jpeg, png, gif.
Required folder organization needs to look like this:
hls folder 01 folder 01.m3u8 ts files.. poster folder (optional) 01.jpg thumb folder (optional) 01.jpg 02 folder 02.m3u8 ts files.. poster folder (optional) 02.jpg thumb folder (optional) 02.jpg 03 folder 03.m3u8 ts files.. poster folder (optional) 03.jpg thumb folder (optional) 03.jpg
We have main folder (called "hls" in our example, this can be called anyhow). Inside "hls" folder are folders, each folder is a hls video and it contains M3U8 file and all the TS files, and poster, thumb folder. "poster", "thumb", folders are optional. Inside "poster" directory poster file are located, inside "thumb" directory thumbnail for the playlist are located.
Notes: this 01, 02 etc in our example is just the name of the videos. This can be named anyhow, for example:
hls folder super_video folder super_video.m3u8 ts files.. poster folder (optional) super_video.jpg thumb folder (optional) super_video.jpg summer_vacation folder summer_vacation.m3u8 ts files.. poster folder (optional) summer_vacation.jpg thumb folder (optional) summer_vacation.jpg my_sister_wedding folder my_sister_wedding.m3u8 ts files.. poster folder (optional) my_sister_wedding.jpg thumb folder (optional) my_sister_wedding.jpg
Also note that m3u8, poster and thumbnail file are named the same!
Copy "hls" folder inside mvp-file-dir folder and enter "hls" inside Playlist manager / Edit playlist section:
Poster and thumbnail images are optional and can be customized in Player manager / Edit player / General settings / Folder playlist tab.
Rules:
Required extension for poster and image thumbnails is jpg.
Google Drive requires API key, go to: https://console.developers.google.com and create New project.
After creating project, go to Enable APIs and Services
Search for Google Drive API and Enable Google Drive API
Go to Credentials, Create credentials, create API key
Add key in Player settings Credentails:
You can load folder of files from Google Drive or single files.
Place videos in your Google drive folder (folder needs to be public). You can also place poster images for each video (optional).
So you end up with this structure in your folder:
video1.mp4 video1.jpg//optional poster image video2.mp4 video2.jpg//optional poster image ...
This is an example of google drive folder: https://drive.google.com/drive/folders/0ByzcNpNrQNpWUFNGcXNCS2lyX1E
Make sure you enable access to folder on Google Drive:
Only enter ID PART of the url in admin. For example, if this is your url:
https://drive.google.com/drive/folders/0ByzcNpNrQNpWUFNGcXNCS2lyX1E
Only enter this in admin:
0ByzcNpNrQNpWUFNGcXNCS2lyX1E
If you want to use single video (or audio) files from google drive, use the following method:
Go to Disc – My drive: https://drive.google.com/drive/my-drive right click on audio, Get shareable link and you get something like this: https://drive.google.com/open?id=0ByzcNpNrQNpWZUlJVjZQVHoxWnM use that audio ID to create google drive video URL: https://www.googleapis.com/drive/v3/files/VIDEO_ID?alt=media This is final URL how google drive audio URL should look: https://www.googleapis.com/drive/v3/files/0ByzcNpNrQNpWZUlJVjZQVHoxWnM?alt=media – use this link in player as type video and data-path url: <div class="mvp-playlist-item" data-type="audio" data-path="https://www.googleapis.com/drive/v3/files/0ByzcNpNrQNpWZUlJVjZQVHoxWnM?alt=media"></div> You can append you Google Drive api key as well if you are trying to play large files: https://www.googleapis.com/drive/v3/files/0ByzcNpNrQNpWZUlJVjZQVHoxWnM?alt=media&key=YOUR_API_KEY
If your Google drive folder does not work, use our test folder with all the instructions here. This is an example of google drive folder: https://drive.google.com/drive/folders/0ByzcNpNrQNpWUFNGcXNCS2lyX1E If it still doesnt work, provide us with link to the player in your page loading our test folder linked here.
You can load folder of files from One Drive or single files.
Place videos in your One drive folder (folder needs to be public). You can also place poster images for each video (optional).
So you end up with this structure in your folder:
video1.mp4 video1.jpg//optional poster image video2.mp4 video2.jpg//optional poster image ...
This is an example of One drive folder: https://1drv.ms/u/s!Av88sx97IzeiaR3CCQxJcw7WvqI
Supported extension for video files is mp4. Supported extension for poster images is jpg|jpeg|png|webp.
If you want to use single files from One Drive, use the following method:
Right click on the file - Embed and copy link, you will get something like this: <iframe src="https://onedrive.live.com/embed?cid=A237237B1FB33CFF&resid=A237237B1FB33CFF%21108&authkey=AB0A6YtJz9Bn7BA" width="320" height="133" frameborder="0" scrolling="no" allowfullscreen></iframe> Use just the src part: https://onedrive.live.com/embed?cid=A237237B1FB33CFF&resid=A237237B1FB33CFF%21108&authkey=AB0A6YtJz9Bn7BA and replace 'embed' with 'download' so you end up with: https://onedrive.live.com/download?cid=A237237B1FB33CFF&resid=A237237B1FB33CFF%21108&authkey=AB0A6YtJz9Bn7BA Use this url in player as type video.
XML file needs to be located on the same domain as the player.
XML examples are provided inside plugin documentation / misc / xml directory.
Important: note that there are single quotes around data-path attribute! All other quotes inside xml nodes are double quotes!
<div class="mvp-playlist-item" data-type="video" data-path='[{"quality": "SD", "mp4": "media/video/04.mp4"}, {"quality": "1280p", "mp4": "media/video/04.mp4"}, {"quality": "720p", "mp4": "media/video/04.mp4"}]' data-share="https://codecanyon.net/user/Tean/portfolio" data-preview-seek="data/seek/04.vtt" data-thumb="media/video/thumb/04.jpg" data-title="Video title goes here" data-description="Self hosted video.">
JSON file needs to be located on the same domain as the player.
JSON examples are provided inside documentation / misc / json directory (you can also use .txt extension instead).
If you want to load an iframe into the player (for example Facebook video, Google maps, etc...) use one of following methods. Note that second method is preffered but you can use any method.
In Edit playlist / Add Media choose custom HTML and enter your HTML in the Path field:
Examples of custom HTML are provided inside documentation / misc / custom directory.
For example, lets say you want to display Daily Motion video inside the player.
In documentation / misc / custom html directory you will find examples of custom HTML files.
In our example (we want to load Daily Motion video), we use daily-motion.txt file (this file can be named anyhow).
Inside that file you can set your HTML for Daily Motion video.
Then, you upload that file (daily-motion.txt) inside this path field in Add new media (as shown in the picture above).
In Edit playlist / Add Media choose custom HTML from external file and enter use to this file in the path field:
Note: if you just want to place your files in public bucket on Amazon S3, you dont need this setup! Then just link to files as usual and use media type video (or audio).
Note that the following only works with Amazon Addon for this plugin
Supported are public and private buckets. Supported are single video/audio urls and reading a whole bucket with video/audio files inside.
1. Create IAM user with credentails on the following link:
https://console.aws.amazon.com/iam/home#/home2. Add username and enable Programmatic access:
3. Enable AmazonS3ReadOnlyAccess policy for user:
4. After user is created copy his credentials (key and secret) and enter then in Global settings / Credentials:
Add CORS policy to bucket (this is required if you want to use image poster / thumbnails in player which are also located in the bucket):
To add CORS policy, go to permissions tab in the bucket, scroll to CORS section and enter the following:
[ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "GET", "HEAD" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [], "MaxAgeSeconds": 3000 } ]
Supported are single video urls and reading a whole bucket with video files inside (the same is true for audio).
1. Read whole bucket with video files:
Create bucket, and choose AWS region closest to you.
Enter highlighted region in plugin settings:
Upload video files inside bucket. If you want to host image poster on S3 as well create folder named "poster" inside this bucket and place your image files for poster inside that folder. The same is true for thumbnails (in this case create folder named "thumb") Images for poster and thumbnails need to have the same name as video files!. Example this bucket has video files and poster / thumbnails named the same!
Poster images in example above use .jpg extension. You can set this option in settings:
Bucket can be public or private. If you want a bucket to be private go to Permissions tab inside a bucket and check Block all public access
Note this only works with Amazon Addon for this plugin!
First follow all steps in the Amazon S3 section. Once you have completed that you can continue with this section.
Sign in to the AWS Management Console and open the CloudFront console at https://console.aws.amazon.com/cloudfront/v3/home
Create Origin access identity (OAI)
Create New key pair. Go to My account -> My security credentials:
Create Cloudfront key pair
Create New key pair. And download both public and private key immediately after creation.
Rename private key to "private-key.pem" and move this file in WordPress uploads / mvp-file-dir directory.
Create Public key under Key management.
Give it some name, then open public key (you downloaded from the previous step) in any text editor and copy its content inside Key field. (Paste this public key value in pem format...). Make sure its a public key you copy not a private key!
Create Key group under Key management.
Choose public key you created in previous step to add to this key group.
Now create distribution
Under Origin domain choose the Amazon S3 bucket you want to connect with this distribution.
Under Restrict viewer access select Yes, and choose Trusted key groups, and select Key group you have created in previous steps in dropdown menu.
Under Cache key and origin requests select Legacy cache settings, choose Include the following headers, click Add custom button, and paste this as custom header inside: Access-Control-Allow-Origin
Access-Control-Allow-Origin
Now end creating distribution.
Copy distribution domain name and Public key pair ID into credentials, and set Use Cloudfront option:
Copy distribution domain name as Cloudfront domain url and Public key pair ID into credentials, and set Use Cloudfront option:
https://xxxxxxxxxxxxx.cloudfront.net/ xxxxxxxxxxxxx = your distribution domain Note the full url with HTTPS, just replace your xxxxxxxxxxxxx distribution domain name!
If you need to update bucket policy you can use this example:
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html
{ "Version": "2012-10-17", "Statement": { "Sid": "AllowCloudFrontServicePrincipalReadOnly", "Effect": "Allow", "Principal": { "Service": "cloudfront.amazonaws.com" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::<S3 bucket name>/*", "Condition": { "StringEquals": { "AWS:SourceArn": "arn:aws:cloudfront::111122223333:distribution/<CloudFront distribution ID>" } } } }
Supported are single videos and reading whole bucket of videos. The same is true for audio.
In Playlist manager / Edit Playlist / Add media dialog choose Add single videos from the bucket and enter bucket name and filename (key):
In Playlist manager / Edit Playlist / Add media dialog choose Read bucket of video files and enter bucket name:
Here is example how the bucket structure needs to look (it includes everything: poster, thumbnails, subtitles which are optional)
video - bucket name -- video1.mp4 -- video2.mp4 -- video3.mp4 poster folder (optional) -- video1.jpg -- video2.jpg -- video3.jpg thumb folder (optional) -- video1.jpg -- video2.jpg -- video3.jpg subtitles folder (optional) video1 folder //folder named the same as the video to which subtitles belong to! -- English.vtt //subtitle file -- German.vtt video2 folder -- English.vtt -- German.vtt video3 folder -- English.vtt -- German.vtt
We have bucket (called "video" in our example, this can be called anyhow). Inside "video" folder are videos, poster, thumb, subtitles folder. "poster", "thumb", "subtitles" folders are optional. Inside "poster" directory poster files are located, inside "thumb" directory thumbnails for the playlist are located. Inside "subtitles" folder, we have subtitles for each video.
Note: Equivalent video and poster/thumbnail file names need to be the same!
audio - bucket name -- audio1.mp3 -- audio2.mp3 -- audio3.mp3 poster folder (optional) -- audio1.jpg -- audio2.jpg -- audio3.jpg thumb folder (optional) -- audio1.jpg -- audio2.jpg -- audio3.jpg subtitles folder (optional) audio1 folder //folder named the same as the audio to which subtitles belong to! -- English.vtt //subtitle file -- German.vtt audio2 folder -- English.vtt -- German.vtt audio3 folder -- English.vtt -- German.vtt
If you use single video (not reading the whole bucket) from Amazon S3 and you want to load subtitle from S3, specify the url to each subtitle which contains following path, example:
subtitles/video1/English.vtt subtitles/video1/German.vtt
Where video1 is the key (video name) without extension.
You can quickly generate a video shortcode using Quick shortcode generator without needing to create a playlist beforehand. Go to Shortcodes plugin menu and into Quick shortcode generator.
From there create one or multiple video shortcodes and use them in your page. For example, lets say you create a shortcode for a single video, you will get something like this:
Some basic player settings are included with this video shortcode (like what player skin is used etc..)
If you want to deeply configure the player, you need to create new player in Player manager section and combine player_id="PLAYER_ID" with your video shortcode), for example:
After you create new player in Player manager and a new playlist in Playlist manager you can generate shortcode in Shortcode section shortcode will look like this:
playlist_id will be loaded in player on start.
playlist_id can contain multiple playlist id's for example:
This means that first playlist_id will be loaded in player on start, other playlists will be located in page and can be loaded in player on runtime using API methods
You can override this with active_playlist (playlist_id=3 is loaded on start):
If you dont want to load playlist on start set active_playlist=""):
Then later you can use api methods to load any playlist from playlist_id="1,2,3"
Player instance ID is generated automatically starting from 0 for every new player in page. For example, if you add one player in page instance_id will be 0.
You can also manually add instance_id in shortcode (then the player will use this as ID), example (This player will have instance_id 5):
This is usefull if you have multiple players in page and you want to control them with javascript or css. By adding instance_id you know exactly how to target each player in page.
To target player with CSS use: mvp-wrapper + INSTANCE_ID (for example #mvp-wrapper0).
#mvp-wrapper0{ max-width:500px; }
To target player with javascript use: mvp_player + INSTANCE_ID (for example window.mvp_player0 or just mvp_player0).
mvp_player0.playMedia(); //Play current media
[apmvp player_id="1" playlist_id="PLAYLIST_ID"] [apmvp player_id="1" playlist_id="PLAYLIST_ID"]Correct:
[apmvp player_id="1" playlist_id="PLAYLIST_ID"] [apmvp player_id="2" playlist_id="PLAYLIST_ID"]
[apmvp player_id="1" playlist_id="PLAYLIST_ID" instance_id="0"] [apmvp player_id="1" playlist_id="PLAYLIST_ID" instance_id="1"](instance_id is just a unique number you choose for each player)
Player shortcode examples:
Load Youtube single video without API and hide playlist:
Load Youtube single video, set video start and end time, set thumbnail alt text, set playback rate, set url link which will open on video end, set video download path, set video password:
Load Youtube playlist, limit to 10 results, set start video, force muted auto play, shadow effect below player, closed playlist on start:
Load Youtube playlist, limit to 10 results, set playlist position, set navigation type, set playlist style, set custom context menu, hide playlist on fullscreen enter, store playlist in browser for 1 hour to limit api requests:
Load Youtube playlist, limit to 10 results, playlist position horizontal bottom, navigation type buttons, playlist style description over thumbnail, navigation style spaced, youtube default player:
Load Vimeo channel, limit to 10 results, playlist position outer, playlist grid style description over thumbnail:
Load Vimeo channel, limit to 10 results, playlist position outer, playlist grid style description below thumbnail, vimeo chromeless player, store playlist in browser for 1 hour to limit api requests:
Load Youtube playlist, limit to 10 results, playlist position wall with lightbox, playlist style description over thumbnail, enable and show load more button
Open player on click:
Open player with Youtube single video on DOM selector click:
Open player in ligthbox with Youtube playlist on DOM selector click:
Playlist shortcode examples:
If you are using Youtube or Vimeo videos, first set API keys in Plugin menu -> Global settings:
Video shortcodes:
Load single mp4 video:
Load single mp4 video, encrypt url from page source, autoplay, hide playlist:
Load single mp4 video with multiple qualities and subtitles: (for each path you need same number of quality_title!)
Load multiple mp4 videos:
You can also combine player_id with multiple videos: (so your player settings come from player_id in admin and your videos from here)
Load video folder with mp4 files:
Load single 360 virtual reality mp4 video:
Live streaming:
Load HLS playlist:
Load multiple HLS videos:
Load MPEG DASH playlist:
Audio shortcodes:
Load single mp3 audio:
Load audio folder with mp3 files:
Image shortcodes:
Load single image:
Load image folder with images files:
Load single 360 image panorama:
Youtube shortcodes:
Load Youtube single video without API, provide your own video thumbnail, title and description:
Load Youtube single video, hide playlist:
Load Youtube multiple videos: (one or more videos spearated by comma)
Load multiple youtube single videos no api:
Load Youtube playlist, limit to 10 results:
Load Youtube channel:
Vimeo shortcodes:
Load Vimeo single video without API (provide your own video thumbnail, title and description):
Load Vimeo single video, hide playlist:
Load Vimeo single video:
Load Vimeo single video with chromeless player (chromeless is only available for videos hosted by a Plus account or higher!):
Load multiple vimeo single videos no api:
Load Vimeo group, limit to 10 results:
Load Vimeo channel:
Load Vimeo user album:
Load Vimeo album: (without specifing username)
Load Vimeo user videos:
Load Vimeo collection / on demand:
Load Vimeo folder videos:
How to use ACF fields in shortcode?
Let says you have these acf fields:
acf_title = video title acf_path = video url (mp4) acf_thumb = video thumb
Example, single video:
If you have multiple videos, you can use shortcode as this:
$rows = get_field('repeater'); if($rows){ $s = '[apmvp preset="aviva"]'; foreach($rows as $row){ $s.= '[apmvp_video type="video" title="'.$row['title'].'" path="'.$row['path'].'" thumb="'.$row['thumb'].'"]'; } $s .= '[/apmvp]'; echo do_shortcode($s); }
Playlist selector contains a list of playlists that can be loaded on runtime.
Activate playlist selector in Edit Player / Style / Playlist selector tab:
Also choose playlists here that you want included in playlist selector.
Set playlist thumbnail, and optional playlist description for each playlist you want to have included in playlist selector in Edit playlist / Playlist options (this data is used in playlist selector):
There are following adverts supported in the player:
Normal adverts can be video, audio file, image file (with data-duration set), Youtube single video or Vimeo single video with chromeless player. They can be added before main media starts, during main media play and after main media ends.
Adverts can be created in 2 ways:
1. In Ad manager create New ad section and inside you can define your adverts. For example: create 5 ad videos that will play before main video starts. You can also randomize those ad videos so everytime player runs it will play different advert.
When you create Ad section you can add this to any player / playlist using shortcode attribute ad_id. This means ad videos from that Ad section will be applied to every video in that playlist!
2. Ads can also be created in Edit Playlist / Add Media section. The process of adding ads is the same as in Ad manager. The only difference here is that when you add some ads in Add media section, these ads will only apply to this media.
So when you run your shortcode, some video from PLAYLIST_ID has ads defined and these ads will be shown when this video plays.
You can also add ad_id to anonymous player:
Example, add different video adverts to video shortcode:
To add this feature in player use following shortcode attributes with apmvp_ad shortcode which needs to be wrapped in apmvp_video shortcode:
Parameter | Value | Description |
---|---|---|
ad_type | ad-pre, ad-mid, ad-end | Advert type: pre advert, mid advert, end advert (preroll, midroll, endroll). Note that only one preroll and endroll can exist, while unlimited number of midroll can exist. |
type | video, audio, image, youtube_single, vimeo_single | advert type |
path | path to video, audio, image, youtube_single (example 3XJh9n8K3XU), vimeo_single (example 165017258) | |
poster | image url | Used with advert type audio. Poster is shown in video area while audio plays. |
skip_enable | seconds | When to show skip advert button, in seconds. If emmited, no skip button will be shown. Settings this vlaue to 0 will show immediatelly. |
begin | seconds | When to start mid advert, in seconds. This is required for mid advert! |
duration | seconds | How long to show the image, in seconds. This is required for image advert! |
link | Url link to open when ad is paused / clicked. | |
target | Url link target (_blank, _parent..) |
You can generate these ads using Quick shortcode generator.
Vast adverts supported in the player are VAST / VMAP / IMA / VPAID, SIMID ...etc
There are 2 ways to use Vast adverts in the player:
1. Using Google IMA SDK https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side
2. Parsing Vast files manually
Both of these methods have their weakness and strength points. Choose what is better suited for your needs:
Will provide more support for different vast formats like VPAID, SIMID ...etc. You can only use it with type video or audio in the player (No Youtube, Vimeo etc...). Some functionality might be limited on mobile because its not possible to fully control playback of Vast video with Google IMA SDK. Its not possible to combine normal adverts with Vast adverts in the player.
Support for some specific vast formats like VPAID, SIMID ...etc might not work! Parsing Vast files manually means you can use Vast with any media type (video, audio, Youtube, Vimeo..). Playback on mobile should be handled better than when using Google IMA SDK. You can combine normal adverts with Vast adverts in the player (for example add Vast preroll advert and self hosted video midroll advert together in the same video).
Available settings for vast (choose whether to use IMA SDK loader or parse VAST files manually here):
Here IMA SDK offers many vast examples for testing:
https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/tags#single-vpaid-2.0-linearExample of vast url (note that vast url comes in a form of doubleclick.net url)
https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=4353453454
Only such url can be used with IMA SDK loader! If you have vast XML files located on your own server then this will be parsed manually.
Inside plugin package, misc directory you will find vast folder with XML vast examples inside, which when added to videos will be parsed manually instead of using IMA SDK loader.
You can ad vast url inside Edit Playlist / Add media section (when adding videos to playlist):
You can also ad vast url inside Edit Playlist / Global playlist data section and then this vast url will be aplied to every video in the playlist:
One vast url can be added for each video in Edit Playlist / Add Media section when adding videos. If you want to use multiple vast for one video, you can use VMAP. VMAP is playlist of VAST files, meaning it can contain multple vast files, each having its own start time.
Start time if defined with timeOffset attribute. Possible values include:
<vmap:AdBreak timeOffset="start"> - pre-roll <vmap:AdBreak timeOffset="00:01:05"> - mid-roll <vmap:AdBreak timeOffset="50%"> - mid-roll (percent values) <vmap:AdBreak timeOffset="end"> - end-roll
You can also apply timeOffset to standard VAST file, adding timeOffset attribute to Ad node:
<Ad timeOffset="start"> - pre-roll <Ad timeOffset="00:01:05"> - mid-roll <Ad timeOffset="50%"> - mid-roll (percent values) <Ad timeOffset="end"> - end-roll
VAST files can be skippable. This is set using skipoffset attribute on Linear node in format hh:mm:ss or percent values 50%
<Linear> - not skippable (default) <Linear skipoffset="00:00:05"> - skippable
VAST url added to single video:
VAST url added to multiple videos:
VAST url added to whole playlist (apply to all videos in playlist):
use_ima_loader:
VAST url added to audio:
When VAST files are parsed manually, you can combine normal adverts with Vast adverts in the video. For example have VAST preroll advert and self hosted video midroll advert together in the same video.
Just make sure start times do not collide (for example having vast midroll start time the same as normal ad midroll start time) or you might get unexpected results.
Its possible to loop VAST files with pre adverts (without playing main video).
How to use?
Wehn adding vast url in Edit Playlist / Add Media section, or in Global playlist options, set vast loop:
Notes:
This only works with VAST file containing pre adverts (adverts that play before main video).
This only works using ima loader (Player Manager / Edit Player / General settings / Vast / Use IMA SDK loader)
You can use included blank.mp4 video file (with zero size) because its not necessary to use real video since it will not be shown. This file is located in plugin package / documenation / misc directory.
There is a small break with a black screen between each vast loop. This is unavoidable because vast needs to reload on Google side, there is no function to actually loop vast.
This black screen can be adjust in css:
.mvp-ima-holder-loop{ background-color: #111!important; }
Inline ads appear in timed intervals while video plays. Advert needs to finish before the video can continue. Its not possible to skip inline adverts.
Settings for Inline ads in located in Edit player / General / Inline ads tab:
Annotations are HTML elements that can appear over video area during playback. Then can be added to self hosted media (video, audio, images with defined data-duration) and Youtube and Vimeo videos with chromeless players.
Annotations can be images, iframes, any HTML, AdSense code, or shortcode.
Annotations can be created in 2 ways:
1. In Ad manager create New ad section and inside you can define your annotations (in annotations tab). For example: create some images that will appear over video area at specified times in seconds. You can attach url link to each image so when image is clicked it will open some url.
When you create Ad section you can add this to any player / playlist using shortcode attribute ad_id. This means annotations from that Ad section will be applied to every video in that playlist!
2. Ads can also be created in Edit Playlist / Add Media section. The process of adding annotations is the same as in Ad manager. The only difference here is that when you add some annotations in Add media section, these annotations will only apply to this video.
So when you run your shortcode, some video from PLAYLIST_ID has annotations defined and these annotations will be shown when this video plays.
You can also add ad_id to anonymous player:
Additional annotation settings are available in Edit player / General settings / Annotations tab:
Popups are HTML elements that can appear over video area during playback. Then can be added to self hosted media (video, audio, images with defined data-duration) and Youtube and Vimeo videos with chromeless players.
Popups are similar to annotations but with a few key differences.
Main purpose of popups is to display ads while video is paused (of any kind since popups accept any HTML).
Annotations are strickly timed based. Popups can appear on video pause and on specific times (for example show popup when video reaches 10 seconds).
Video is always paused when popup appears, while annotations play regardless of video. Its not possible to resume video while popup is opened.
Only single popup can be shown at a time, while multiple annotations can be shown at once.
Layout is slightly different for popups. Popups are always centered and accept content larger then video area so content can be scrolled vertically.
Popups can be useful for large data display, when focus is mainly on popup since video is paused. You can use it to display for example some iframes over video, or some user forms. Popups can also be used for displaying simple images (additionally linked to url on click).
Its possible to display one or more popups which are shown on video pause (if multiple popups exist every time video is paused new popup is going to be shown).
Its possible to display timed popups (show one popup when video reaches 10 seconds, second popup when video reaches 20 second etc..)
Its possible to mix both popups on pause and timed popups together.
Careful not to mix annotations and popups together at the same time since popup opens above everything and its not possible to access other video area when popup is shown.
Note if you have Show Poster On Pause in Edit Player / General setting / Playback tab set to yes, it will overwrite popop (and show poster instead) so make sure you turn if off.
Note timed popups can be skipped if user seeks beyond time in which popup should appear. If you want to prevent this you can use Disable skipping video option in Edit Player / General setting / Playback tab
Popups can be created in 2 ways:
1. In Ad manager create New ad section and inside you can define your popups (in popups tab). For example: create some image that will appear over video area when video is paused. You can attach url link to image so when image is clicked it will open some url.
When you create Ad section you can add this to any player / playlist using shortcode attribute ad_id. This means popups from that Ad section will be applied to every video in that playlist!
2. Ads can also be created in Edit Playlist / Add Media section. The process of adding popups is the same as in Ad manager. The only difference here is that when you add some popups in Add media section, these popups will only apply to this video.
So when you run your shortcode, some video from PLAYLIST_ID has annotations defined and these annotations will be shown when this video plays.
You can also add ad_id to anonymous player:
Additional popup settings are available in Edit player / General settings / Popups tab:
If you want to use these settings directly in shortcode:
Popup can be closed on demand using player api methods closePopup
<a onclick="closePopup();return false;" href="#">Close popup </a> <script type="text/javascript"> function closePopup(){ mvp_playerID.closePopup(); return false; }; </script>
You can use this feature, for example, if you open some kind of data in popup in which user needs to interact with, like forms, and then if the user completed the required, you can close the popup and resume video.
Example of image popup
Upload image, optionally add url to image so it opens url when clicked:
Example of iframe popup
Add only iframe src tag (not whole iframe):
Example of shortcode popup
Add your shortcode (which will be executed and show your shortcode content in the player area):
Example of HTML popup
Add form to popup (we add HTML and CSS for the form):
Form HTML:
<form id="my-form" action="#" onsubmit="customCallback();return false;"> <label for="fname">First Name</label> <input type="text" id="fname" name="firstname" placeholder="Your name.." required=""> <label for="lname">Last Name</label> <input type="text" id="lname" name="lastname" placeholder="Your last name.." required=""> <label for="country">Country</label> <select id="country" name="country"> <option value="australia">Australia</option> <option value="canada">Canada</option> <option value="usa">USA</option> <option value="not">Not listed</option> </select> <input type="submit" value="Submit"> </form>
Form CSS:
#my-form{ background-color: #f2f2f2; padding: 20px; max-width: 500px; } #my-form input[type=text], #my-form select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } #my-form input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } #my-form input[type=submit]:hover { background-color: #45a049; } #my-form div { border-radius: 5px; background-color: #f2f2f2; padding: 20px; }
What to do when video ends. Possible values are:
next = go to next media in playlist loop = loop current media rewind = rewind current media to start poster = show poster of current media, requires poster set for self hosted media coming next = show coming next screen (next video preview) related = show related videos screen custom content = show custom HTML
These values can be adjusted in Edit Player / General / Media end action tab:
Example directly in shortcode:
Use Media End Action:'Go to next media'
Use Media End Action:'loop current media'
Use Media End Action:'rewind to beginning and stop'
Use Media End Action:'poster'
Requires poster to be set on video when adding videos in Edit Playlist / Add media dialog. Or directly in shortcode with poster="POSTER_URL".
Coming Next screen can be displayed after video ends, which will show info about next video (video title and poster in the background):
Use Media End Action:'show coming next screen'
To utilize this feature fully, its advised to have video poster defined for next video, because this poster is shown in the coming next video screen. If poster is not available, next video thumbnail will be used, if available.
This feature can be used to quickly implement watch limit.
Use Media End Action:'show custom image'
Use Media End Action:'show custom content'
When you select Show custom content from the dropdown, you will be able to add your own HTML and CSS for this section.
Make sure HTML is properly formated so it doesnt break the player layout! Validate HTML here https://validator.w3.org/
By default only admin can create playlists. This is set with Playlist Capability role option in Global Settings / Users tab:
If you want to allow users with role below the admin to create their own playlists, you can assign lower role, for example publish_posts. You can also create different levels of playlist capability for different user roles.
User can set video as favorite. Note that only single video sources can be made favorites. Meaning for example mp4 videos, Youtube single video etc, but not videos coming from grouped sources like Youtube playlist, Youtube channel etc..
Video can be set as favorite in both Playlist manager / Edit playlist section and on the frontpage in the player.
Favorite video options are available in Edit player / General / Add To Favorite tab:
User can add video to favorites from in Playlist manager / Edit Playlist section:
User can also add video to favorites directly in the player in front page by accessing more menu in playlist items or right click context menu:
Following is the example of shortcode with favorite videos (add show_fav="1" user_id="2" to shortcode):
Changing the order in which videos appear in the player
You can order videos by ID column (which equals order when video was added to the playlist), or manually dragging by ID column to change individual video order, or by title column to order videos by title.
Adjust keyboard settings in Edit Player / General settings / Keyboard tab:
Creates dialog info with all currently used keyboard keys and add button to settings menu which opens the dialog.
Using query string parameters. Rules: all parameters begins with "mvp-", replace parameter camelCase with dash, use + instead of space, use comma for array values. If you want to use comma in title or description text for example, replace it with some other character like semicolon(;)
Player settings example:
www.domain.com/some-page?mvp-auto-play=true&mvp-active-item=1&mvp-media-end-action=loop&mvp-playlist-item-content=title,thumb&mvp-skip-poster=true&mvp-use-resume-screen=false&mvp-random-play=true&mvp-playlist-opened=false
For all possible parameters check Shortcodes section / Player shortcodes in admin
Single video in player:
www.domain.com/some-page?mvp-type=video&mvp-path-=VIDEO_URL&mvp-path=QUALITY_MENU_TITLE&mvp-thumb=THUMB_URL&mvp-title=VIDEO_TITLE&mvp-poster=VIDEO_POSTER&mvp-subtitle=SUBTITLE_LABEL&mvp-subtitle=SUBTITLE_URL
www.domain.com/some-page?mvp-type=video&mvp-path-=media/video/01.mp4&mvp-path=720p&mvp-thumb=media/video/thumb/01.jpg&mvp-title=Video+title+one&mvp-poster=media/video/poster/01.jpg&mvp-subtitle=English,German,Spanish&mvp-subtitle=data/subtitles/sintel-en.vtt,data/subtitles/sintel-de.vtt,data/subtitles/sintel-es.vtt
Multiple video qualities and multiple subtitles:
www.domain.com/some-page?mvp-type=video&mvp-path-=VIDEO_URL_QUALITY_1,VIDEO_URL_QUALITY_2&mvp-path=QUALITY_MENU_TITLE_1,QUALITY_MENU_TITLE_2&mvp-thumb=THUMB_URL&mvp-title=VIDEO_TITLE&mvp-poster=VIDEO_POSTER&mvp-subtitle=SUBTITLE_LABEL_1,SUBTITLE_LABEL_2,SUBTITLE_LABEL_3&mvp-subtitle=SUBTITLE_URL_1,SUBTITLE_URL_2,SUBTITLE_URL_3
Set start time in seconds (mvp-start=12, or mvp-playback-position-time=12):
www.domain.com/some-page?mvp-type=video&mvp-path-=media/video/01.mp4&mvp-path=720p&mvp-thumb=media/video/thumb/01.jpg&mvp-title=Video+title+one&mvp-poster=media/video/poster/01.jpg&mvp-start=12
If you are trying to share video url without other video parameters use playback-position-time for start time (play forth video at 12 seconds):
www.domain.com/some-page?mvp-active-item=3&mvp-playback-position-time=12
Or use media-id:
www.domain.com/some-page?mvp-media-id=3&mvp-playback-position-time=12
Multiple videos in player:
www.domain.com/some-page?mvp-type=video,video&mvp-path-=VIDEO_URL_QUALITY_1,VIDEO_URL_QUALITY_2&mvp-path-1-mp4=VIDEO_URL_QUALITY_1,VIDEO_URL_QUALITY_2&mvp-path=QUALITY_MENU_TITLE_1,QUALITY_MENU_TITLE_2&mvp-path-1-quality=QUALITY_MENU_TITLE_1,QUALITY_MENU_TITLE_2&mvp-thumb=THUMB_URL,THUMB_URL&mvp-title=VIDEO_TITLE,VIDEO_TITLE&mvp-poster=VIDEO_POSTER,VIDEO_POSTER&mvp-subtitle=SUBTITLE_LABEL_1,SUBTITLE_LABEL_2,SUBTITLE_LABEL_3&mvp-subtitle-1-label=SUBTITLE_LABEL_1,SUBTITLE_LABEL_2&mvp-subtitle=SUBTITLE_URL_1,SUBTITLE_URL_2,SUBTITLE_URL_3&mvp-subtitle-1-src=SUBTITLE_URL_1,SUBTITLE_URL_2
www.domain.com/some-page?mvp-type=video,video&mvp-path-=media/video/01.mp4,media/video/01_hd.mp4&mvp-path=720p,1080p&mvp-path-1-mp4=media/video/02.mp4,media/video/02_hd.mp4&mvp-path-1-quality=SD,HD&mvp-thumb=media/video/thumb/01.jpg,media/video/thumb/02.jpg&mvp-title=Video+ 1,Video+title+two&mvp-poster=media/video/poster/01.jpg,media/video/poster/02.jpg&mvp-subtitle=English,German,Spanish&mvp-subtitle=data/subtitles/sintel-en.vtt,data/subtitles/sintel-de.vtt,data/subtitles/sintel-es.vtt&mvp-subtitle-1-label=German,Spanish&mvp-subtitle-1-src=data/subtitles/tumblr-de.vtt,data/subtitles/tumblr-es.vtt
Note:
1. You need to have equal number of properties! (so for each video in url same number of thumb, same number of title etc..)
2. Note that path and subtitles have specific format (mvp-path-, mvp-path-1-mp4, mvp-path, mvp-path-1-quality... for each video).
The same for subtitles (mvp-subtitle, mvp-subtitle-1-label, mvp-subtitle, mvp-subtitle-1-src... for each video)
For parameters check Shortcodes section / Media shortcodes in admin
Youtube single video:
www.domain.com/some-page?mvp-type=youtube_single&mvp-path=VIDEO_ID&mvp-playlist-position=no-playlist
www.domain.com/some-page?mvp-type=youtube_single&mvp-path=pSOoXLRBDuk&mvp-playlist-position=no-playlist
Youtube single video (same video without using youtube api):
www.domain.com/some-page?mvp-type=youtube_single&mvp-path=VIDEO_ID&mvp-thumb=THUMB_URL&mvp-title=VIDEO_TITLE&mvp-description=VIDEO_DESCRIPTION&mvp-poster=VIDEO_POSTER&mvp-noapi=true
www.domain.com/some-page?mvp-type=youtube_single&mvp-path=pSOoXLRBDuk&mvp-thumb=https://i.ytimg.com/vi/pSOoXLRBDuk/mqdefault.jpg&mvp-title=Giorgio+Armanis+boudoir+fashion+commercial&mvp-description=Russo+supe+Sasha+Pivovarova+e+universalmente+celebrata+per+il+suo+look+unico;+quello+di+uno+straniero+in+possesso+proveniente+da+un+pianeta+ghiacciato+e+possibilmente+incrociato+con+un+husky.&mvp-poster=https://i.ytimg.com/vi/pSOoXLRBDuk/maxresdefault.jpg&mvp-noapi=true
Multiple Youtube videos:
www.domain.com/some-page?mvp-type=youtube_single,youtube_single,youtube_single&mvp-path=VIDEO_ID,VIDEO_ID,VIDEO_ID
www.domain.com/some-page?mvp-type=youtube_single,youtube_single,youtube_single&mvp-path=jXSxzMTrKq0,5zYArkwq2PQ,M4z90wlwYs8
Youtube playlist:
www.domain.com/some-page?mvp-type=youtube_playlist&mvp-path=PLAYLIST_ID&mvp-limit=10&mvp-load-more=true
www.domain.com/some-page?mvp-type=youtube_playlist&mvp-path=PLFgquLnL59alCl_2TQvOiD5Vgm1hCaGSI&mvp-limit=10&mvp-load-more=true
Youtube channel:
www.domain.com/some-page?mvp-type=youtube_channel&mvp-path=CHANNEL_ID&mvp-sort=date&mvp-limit=10&mvp-load-more=true
www.domain.com/some-page?mvp-type=youtube_channel&mvp-path=UCqhnX4jA0A5paNd1v-zEysw&mvp-sort=date&mvp-limit=10&mvp-load-more=true
For parameters check Shortcodes section / Media shortcodes in admin
INSTANCE_NAME: If player_id is used in shortcode then INSTANCE_NAME is mvp_playerPLAYER_ID (or if instance_id is used in shortcode then its mvp_playerINSTANCE_ID) [apmvp player_id="1" playlist_id="2"] If anonymous shortcode is used INSTANCE_NAME is mvp_playerUNIQUE_ID [apmvp preset="default" radio_url="RADIO_URL"] UNIQUE_ID is generated dynamically starting from 0 for every new player in page. Which means first player in page is going to have UNIQUE_ID 0.
Vimeo single video:
www.domain.com/some-page?mvp-type=vimeo_single&mvp-path=VIDEO_ID&mvp-playlist-position=no-playlist
www.domain.com/some-page?mvp-type=vimeo_single&mvp-path=137812610&mvp-playlist-position=no-playlist
Vimeo single video (same video without using Vimeo api):
www.domain.com/some-page?mvp-type=vimeo_single&mvp-path=VIDEO_ID&mvp-thumb=THUMB_URL&mvp-title=VIDEO_TITLE&mvp-description=VIDEO_DESCRIPTION&mvp-poster=VIDEO_POSTER&mvp-noapi=true
www.domain.com/some-page?mvp-type=vimeo_single&mvp-path=137812610&mvp-thumb=https://i.vimeocdn.com/video/461423991_295x166.jpg&mvp-title=This+is+Vimeo+video&mvp-description=OTBMIAMI+Presents+High+Fashion+with+We+The+Fresh+clothing.&mvp-poster=https://i.vimeocdn.com/video/461423991_1280x720.jpg&mvp-noapi=true
Vimeo channel:
www.domain.com/some-page?mvp-type=vimeo_channel&mvp-path=CHANNEL_ID&mvp-limit=10&mvp-sort=added&mvp-sort-direction=desc&mvp-load-more=true
www.domain.com/some-page?mvp-type=vimeo_channel&mvp-path=fashioninmotion&mvp-limit=10&mvp-sort=added&mvp-sort-direction=desc&mvp-load-more=true
For parameters check Shortcodes section / Media shortcodes in admin
Live streaming HLS video:
www.domain.com/some-page?mvp-type=hls&mvp-path=URL_TO_M3U8&mvp-playlist-position=no-playlist
Live streaming DASH video:
www.domain.com/some-page?mvp-type=dash&mvp-path=URL_TO_MPEG_DASH&mvp-mp4=OPTIONAL_MP4_BACKUP_URL_FOR_BROWSERS_THAT_DO_NOT_SUPPORT_DASH&mvp-playlist-position=no-playlist
For parameters check Shortcodes section / Media shortcodes in admin
You can initialize player when clicking on some DOM element in page. This can apply to normal player type and lightbox player type.
Examples:
Open player with Youtube single video on DOM selector click:
If player is placed in some element which is hidden on page load (with CSS display none like a tab for example) then player might have an issue to resize itself correctly on start. Then player will monitor when parent becomes visible so it can correctly resize itself.
Lightbox mode is supported for following layouts: vertical right bottom, vertical bottom, horizontal bottom, no playlist (just player). Player can open in lightbox by clicking on any html element in page. Everything else is the same as for normal player. Specify element which will open lightbox on click in Edit Player / Style / Layout - DOM selector. This can be ID or classname.
So in your post or page you can create an element that will open lightbox when clicked:
<a href="#" class="some-element">open lightbox</a>
Additionally you can also specify video to open (using media id)
So in your post or page you can create some elements, each one will open different video in lightbox when clicked:
<a href="#" class="some-element" data-media-id="1">open video media id 1</a> <a href="#" class="some-element" data-media-id="2">open video media id 2</a> <a href="#" class="some-element" data-media-id="3">open video media id 3</a>
data-media-id represent video id, which you can get in Playlist manager / Edit playlist if you want to target specific video in playlist:
Examples:
Open player in lightbox with Youtube playlist on DOM selector click:
1. Using "automatic" feature (works for HTML5 self hosted video only). Preview thumbnail will be generated automatically.
In Edit Playlist / Add new Media section enter "auto" in field:
2. Using vtt file (works for all media types). Requires sprite of images and vtt file with time/image data for video.
In Edit Playlist / Add new Media section enter vtt url in field.
Example of vtt file can be found inside documentation / seek folder. The coordinates are set as the xywh hash on the URL in the order X Offset, Y Offset, Width, Height.
WEBVTT 00:00:00.000 --> 00:00:05.000 data/seek/01_seek.png#xywh=0,0,120,68 00:00:05.000 --> 00:00:10.000 data/seek/01_seek.png#xywh=120,0,120,68 00:00:10.000 --> 00:00:15.000 data/seek/01_seek.png#xywh=0,68,120,68 00:00:15.000 --> 00:00:20.000 data/seek/01_seek.png#xywh=120,68,120,68This example is made with 120x68px thumbnails (16/9). If different format thumbnails are required, this can be changed by editing mvp.css file (mvp-preview-seek-wrap).
Define specific times in video when to execute a function. Available for media type video, audio, Youtube, Vimeo.
Add cue point to video in Playlist manager / Edit Playlist / Add media dialog:
Each cue point has start time in seconds and code to be executed. If cue code type is callback, then cue code should be function present somewhere in your page on global level, example:
Add this function somewhere in page on global level:
function myFirstCue(args){ alert('callback at '+args.start+' seconds') console.log(args) }
Settings available for cue points in Player manager / Edit Player / General settings / Playback tab:
Show animated preview when hovering over playlist item thumbnail. This can be applied to any media.
Requires gif or a small video.. Url to gif is added inside Add media section:
To show resume screen before video starts and allow user to choose either to resume video from last played position or restart from beginning:
To activate this feature use these settings in Edit Player / General settings / Playback tab:
Note: resume playback position applies for main video, which means if video has adverts, playback position will be saved for main video, advers will play as usual.
In the rescent years, browsers (both desktop and mobile) are restricting autoplay video with sound. The only way it is possible to autoplay video on page start automatically is by mutting the video (setting volume to 0).
1. If you want to autoplay video, and set autoplay in player settings, player will automatically mute video so it can autoplay. Then you can unmute video by clicking on volume icon in player controls. Alternativelly, you can use unmute video button, which is displayed over the player area.
2. If you do not autoplay video, and choose to start video plaback manually, then the player will use the volume you have set in player settings. When the user starts playing video, player will start playing video with sound.
You can restrict video from being viewed by non logged in users or users with specific user roles. Restricting a video would show a screen like this when condition meet:
To activate this feature set Lock video time and select user roles in Edit Playlist / Playlist options / Global options tab:
You can also set Lock video time in Add / edit media section (when you add videos in playlist) which will be applied only for specific video.
You can restrict video from being downloaded by non logged in users or users with specific user roles. Restricting a video from being downloaded would show a screen like this when condition meet:
To activate this feature use these settings in Edit Player / General settings / Restrict content tab:
You can choose which users can view video without ads showing (ads are pre advert, mid advert, end advert).
To activate this feature use these settings in Edit Player / General settings / Restrict ads tab:
Player can display watched video percentage in playlist thumbnails (red line representing maximum watched time).
To activate this feature use these settings in Edit Player / General settings / Playlist tab:
Notes:
Maximum reached time for each video will be tracked. Once video is finished watching, watched time will be shown as 100%.
Clear watched times for videos in playlist, in Edit Playlist / Playlist options / Maintenance tab:
To use directly in shortcode:
Its possible to display playlist on mobile in fullscreen layout which opens above the player. This is useful so the playlist does not share space with the player on small screens.
This option in available for all layouts except outer, wall, just player. If this option is activated, on mobile, there will be no playlist on side (or bottom). Instead clicking toggle playlist button will open playlist in fullscreen layout above the player.
Activate this option in Edit Player / General settings / Playlist tab:
Note that when this option is used, following features are not available (since they are part of playlist window which is not used):
transcript chapter window playlist selector
Chapters can either be shown in chapter menu (which opens above the player) or chapter window (which is shown above playlist).
Example of chapter menu:
Example of chapter window:
Note that when using chapter window you can also show image thumbnails for each chapter. Image thumbnails are present in the vtt file for chapters (after #img=), example:
0 00:00:00.000 --> 00:00:10.000 This is one very long title indeed#img=data/chapters/thumbs/ch0.png 1 00:00:10.000 --> 00:00:13.500 Guidance#img=data/chapters/thumbs/ch10.png
Chapter url for video is added in Add media section when adding videos:
Example of chapter file can be found inside documentation / chapter folder.
If you are loading chapter across domain, cors will be required. Add cors url in Global settings.
Check option for chapter to require cors when adding chapter to video inside Add media section:
1. If you want to show chapter menu before video starts, select Show controls before video is played in Edit Player / General settings / Chapters tab:
2. Set video auto play false in Edit Player / General settings / Playback tab.
Note that (to show chapter menu before video starts) for self hosted media you need to supply video duration in seconds and video needs to have poster set (this is done in Add media section when adding videos).
For Youtube you need to select Playlist item content duration in Edit Player / Style / Layout tab.
To display chapters in mobile friendy list, select Use mobile chapter menu in Edit Player / General settings / Chapters tab:
This feature is activated by clicking on chapter toggle button in player controls. This will display chapters on mobile in following way:
1. This is only possible when using chapter menu (not with chapter window)
2. Auto open chapters menu is not compatible using this.
Using transcript means showing video subtitles in separate window above the playlist area. This means you need to use visible playlist in player.
Transcript will use video subtitles which means you need to have subtitles set on your video (which is done when you add videos to playlist in Add media dialog).
1. Activate transcript in Edit player / Style settings / Elements tab:
Available options for transcript:
Note that transcript language by default is not syncronized with the actual subtitles in player, meaning if you change transcript language in a transcript window, you can have subtitles displaying in one language in transcript window while in another language in the player.
There are following ways to hide real video url:
To hide video url from page source enable this Encrypt media paths in Edit Playlist / Playlist options:
Or, add encrypt_media_paths="1" option in shortcode:
To have video as a blob, use following settings:
Or, add use_blob="1" option in shortcode:
This applies to html5 media (video, audio).
Another option if possible is to use live streaming method and deliver your videos in a form of HLS or MPEG DASH format. This means choosing HLS or MPEG DASH when adding videos in Edit Playlist / Add mediadialog.
Subtitles can be set for self hosted video, audio and Youtube or Vimeo chromeless players. Subtitles can be in vtt or srt format.
Subtitle examples are provided inside documentation / misc / subtitles directory.
Subtitles for video are added inside Edit Playlist / Add media section:
Notes:
.1 Last active subtitle is saved in browser cache. If you move to next video or load video player again, player will try to select same subtitle language (from menu subtitle label field).
NOTE: Be sure to validate your WebVTT using a WebVTT Validator.
If you are loading subtitle across domain, cors will be required. Add cors url in Global settings.
Check option for subtitle to require cors when adding subtitle to video inside Add media section:
Casting with player is available for self hosted video, self hosted audio and live streaming (hls, dash) formats. Note that when player is casting, player features are limited (For example you cannot use video adverts or annotations above the video area. Such functionality is not supported by Chromecast)
Casting is supported the Chrome browser on a Mac, Windows, Linux, ChromeOS, and Android devices. Casting is not supported on the iOS Chrome browser. Note: casting only works with HTTPS url!
1. Activate cast button in Edit Player / Style / Elements tab:
2. Chromecast button will appear insaide player controls if casting is available:
3. CORS is required for video containing subtitles or live streaming:
https://developers.google.com/cast/docs/chrome_sender/advanced#cors_requirementsExample of htaccess setup below. You need to create htaccess file with following configuration and copy this file to every folder on your server that has video subttiles. If you use live streaming like HLS video format, you need to make sure its CORS enabled!
Header set Access-Control-Allow-Origin "*" Header add Access-Control-Allow-Headers: "Content-Type"
4. Available settings for Chromecast:
Subtitle settings (for more details see https://developers.google.com/cast/docs/reference/chrome/chrome.cast.media.TextTrackStyle )
Select Airplay option to be enabled in the player in Edit player / Style / Elements tab:
Set Disable remote playback to false in Edit player / General / Playback tab:
If Airplay is supported and compatible, button to turn on Airplay will show in player controls when video plays.
Some options for videos can be defined on global playlist level, which means these options will be applied to every video in playlist. These option will take precedence over options set when adding videos to playlist in Add media section.
You can add any number of icons in playlist and attach url to each icon. Icons can be SVG, font icons , full img tag. Note that using some formats (like SVG or img tag) may require additional CSS added!
You can add icons to videos in Edit Playlist / Add media section (when you add videos to playlist):
You can use Font Awesome selector for adding icons, but you can also add SVG code or full img tag inside icon field value instead. Note that using some formats (like SVG or img tag) may require additional CSS added!
Note: if you use Font Awesome icons you need to activate Font Awesome in Global settings:
We recommend providing full SVG code for icons so you dont need to include and use Font Awesome in page.
To get SVG code, for example, go to Font Awesome page, choose icon and copy SVG code. Of course you can get SVG code from different websites.
If you want to call a function when some icon is clicked do the following.
Add icon in song with chosen class attribute.
Add javascript code to listen for icon click:
<script> document.addEventListener('click', e => { if (e.target.closest('.my-icon-class')) { alert('function is called') } }) </script>
If you want to change icon colors you can target them with following css:
.my-icon-class{ color:#aaaaaa; }
Up next video thumbnail can show automatically above player controls X seconds before the current video ends. This will also show when the user hovers previous or next video buttons in player controls.
Setting upnext time option in Edit player / General / Playback tab will show upnext screen X seconds before media finishes. Applies for the whole playlist.
There is also an option to show up next incoming or / previous played video when hovering with mouse over next / previous buttons in player controls (applies to desktop browsers). To activate this feature use this option in Edit player / General settings / General tab:
You can display playlist thumbs in front page, click on each thumb will load new playlist in player.
2 shortcodes are required, one for playlists to display, another for the player.
Parameter | Value | Description |
---|---|---|
playlist_id | Playlist ID(s) to display. playlist_id should have the same attribute in both shortcodes! | |
active_playlist | Active playlist which is going to be loaded in player on start. Used in apmvp_playlist_display shortcode to set active class on playlist thumbnail (optional) | |
player_id | Related player ID. player_id should have the same attribute in both shortcodes! | |
instance_id | Player instance ID is generated dynamically starting from 0 for every new player in page. Which means first player in page is going to have instance_id 0. instance_id should have the same attribute in both shortcodes! | |
header_title | Header title. |
Show 3 playlists with ID (1,2,3) in player ID (5):
First playlist_id will be loaded in player on start. You can override this with other playlist_id (for example playlist_id=3 is loaded on start):
If you dont want load load a playlist on start you can use active_playlist="" empty in shortcode (which means no playlist loaded):
Playlist display with grid skin:
To make the player automatically become fixed to page bottom if user scrolls down the page, use the following settings in Edit Player / General tab / Minimize on scroll tab:
To make the player autoplay when user scroll the page and video player enters into view use the following settings in Edit Player / General tab / Playback tab:
Layouts with Playlist position "outer" and "wall" are display as thumbnail grid. There are mutilple ways to display grids. In Edit Player / Style tag when you select playlist position with grid, you will have the option to choose grid type.
Javascript grid uses mathematical breakpoints for grid positioning. CSS grids use css for grid styling.
Grid with anonymous player:
grid_type = javascript / grid1 (display grid) / grid2 (column count) playlist_grid_style = gdot (description over thumbnail) / gdbt (description below thumbnail)
Use quick shortcode generator to create more grid shortcodes.
Displaying videos in player in segments
1. If you have lots of self hosted videos in playlist (100+) its recommended to use Retrieve more on total scroll option which can be found in Edit Playlist / Playlist Options / General tab:
This way on start only 20 videos (or other desired amount) will be loaded in the player and when user scrolls to the end of the playlist, another 20 will be retrieved.
Pagination can be used with Outer or Wall playlist position. Pagination buttons will be created below the grid. This can only be used with single media (single video sources like mp4 video).
Pagination cannot be used with Youtube, Vimeo, Folder media...
Activate this feature in Edit Playlist / Playlist Options / Advanced tab:
Or use direct shortcode attributes (use_pagination, pagination_per_page):
Same with anonymous player:
playlist_grid_style = gdot (description over thumb) / gdbt (description below thumb)
Note that Theater mode is advanced feature and in most cases will require you to prepare your website layout in such way that theater is made possible (like Youtube does it).
Example of theater mode is here:
https://interactivepixel.net/env/mvp/content/theater.htmlAs you can see in example above in css, div class="player" (that holds the player) is restricted to 70% of the page width (in normal mode). Once the theater button is clicked, 'theater-mode' class is added to parent div class="foo", which makes div class="player" (that holds the player) to have 100% width, thus making video player expand itself to full page width.
Something like having one column ( Theater element) where the video player is situated, restricted to 50% page width for example , then when theater mode happens (user clicks theater button), our player will add new class to this column (Theater element class), and using css then set this column to 100% width for example.
.your column{ width:50%;} .your column.custom-class-added-on-theater{ width:100%;}
Where:
Theater element = .your column Theater element class = custom-class-added-on-theater
Theater mode is available with all layouts except Grid wall with lightbox. You can restrict the width of the player in Player style / layout tab, and when theater mode is requested, player will become full width. Ideally if you have player in empty fullwidth container in your webpage, when theater mode is activated, you dont need to do anything. Otherwise if you have multi column layout or some kind of width restriction, margin or padding on the parent that holds the player, then you would need to make parent have fullwidth before theater mode happens. You can attach custom class to DOM selector when theater mode happens. When theater mode happens, your DOM selector will get custom class, and in there you can adjust parent to have full width available.
Set theater options in Edit Player / General / Theater tab:
This means when theater mode happens, element with class "some-container" will have class "foo" attached.
There are also these events available:
mvp_playerID.addEventListener("beforeTheaterEnter", function(data){ //called before theater enter, returns (instance, instanceName) }) mvp_playerID.addEventListener("beforeTheaterExit", function(data){ //called before theater exit, returns (instance, instanceName) });
Player can use following embedding functionality in embed screen.
You can generate embed code for whole playlist of for a single video. This is controlled in Edit player / General settings / Embed tab:
Url link offers direct link to video on your website.
Set up age verification on specific video in Add / edit media section (when you add videos in playlist):
Additional setings for age verifications are available in Edit Player / General settings / Age verify tab:
Activate this option with following settings in Edit Player / General settings / Camera:
If you want to display offlne image when the camera is not running you can do this with Offline image setting:
API methods available:
mvp_playerID.startStream(options)//start camera - options (optional parameter), default is: {audio: true, video:true} mvp_playerID.stopStream()//stop camera mvp_playerID.startRecord(options)//start record camera video - options (optional parameter), default is: { mimeType: "video/webm" }; See mediaRecorder options: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder timeslice (additional option) - The number of milliseconds to record into each Blob. If this parameter isn't included, the entire media duration is recorded into a single Blob unless the requestData() method is called to obtain the Blob and trigger the creation of a new Blob into which the media continues to be recorded. Example: options.timeslice = 2000 mvp_playerID.stopRecord()//stop record camera video plamvp_playerIDyer.getRecorderData()//returns blob array of recording video data mvp_playerID.makeSnapshot(canvas)//creates snapshot of current video to camera to canvas, pass your own canvas element or player will create its own. mvp_playerID.downloadStream()//download recorded stream mvp_playerID.setOfflineImage(url)//set image which will display when camera is not running
Restict video watching time and show custom image on video end.
1. Set media end handler to image and upload your image.
2. Restrict video end time when adding videos to playlist in Edit Playlist / Add media dialog, or directly in shortcode. This step is optional. Even if you dont restrict, custom image will still be shown on video end, since this is default media end action set in step 1 above.
Example, directly in shortcode, limit video to 10 seconds (end="10"):
1. Activate this option in General settings / Miscellaneous tab:
2. Use the following inside your post editor:
Override HTML5 video (mp4)
[video src="URL_TO_MP4_VIDEO"]
Override Youtube video
[embed width="500" height="350"]https://www.youtube.com/watch?v=8qXnw84ERGU[/embed]
Override Youtube playlist
[embed width="500" height="350"]https://www.youtube.com/playlist?list=PLKfWL8IXgKBt2eZVF20Ar9EhSUtPFygS3[/embed]
Override Vimeo video
[embed width="500" height="350"]https://vimeo.com/644036051[/embed]
You can use these settings to get rid of the black lines that sometimes can appear above/below of the video area. All this depends on the player size and the aspect ratio of the video inside the player.
If you want to make player 100% size of available window area, use following settings in Edit Player / Style / Layout tab.
Video transform enables to zoom and move video around. Last transform state can also be saved permanently so it applies for all videos.
Enable video transform in Edit player / General / Video transform tab:
You can display image of choice over the player area when your stream is offline or in scenario when the player does not currently have any videos to play.
Set Offline image in Edit Player / General / Offline image tab:
Image will automaticaly be removed when new video is requested to play in the player (via any means including adding it using API methods). You can manually remove offline image with API methods setOfflineImage()
Player offers a wide variety of language translations.
Language can be set in Edit Player / Translation tab.
Following callbacks are supported:
mvp_playerID.addEventListener("setupDone", function(data){ //called when plugin has been instantiated and is ready to use api, returns (instance, instanceName) }) mvp_playerID.addEventListener("mediaRequest", function(data){ //called when new media has been requested, returns (instance, instanceName, media) //console.log(data.instance, data.instanceName, data.media); }) mvp_playerID.addEventListener("mediaStart", function(data){ //called on media start, returns (instance, instanceName, media) }) mvp_playerID.addEventListener("mediaPlay", function(data){ //called on media play, returns (instance, instanceName, media) }) mvp_playerID.addEventListener("mediaPause", function(data){ //called on media pause, returns (instance, instanceName, media) }) mvp_playerID.addEventListener("mediaEnd", function(data){ //called on media end, returns (instance, instanceName, media) }) mvp_playerID.addEventListener("playlistStartLoad", function(data){ //called on playlist start load, returns (instance, instanceName) }) mvp_playerID.addEventListener("playlistEndLoad", function(data){ //called on playlist end load, returns (instance, instanceName) }) mvp_playerID.addEventListener("clickPlaylistItem", function(data){ //called on playlist item click, returns (instance, instanceName) }) mvp_playerID.addEventListener("playlistItemDisabled", function(data){ //called on playlist item disable, returns (instance, instanceName) }) mvp_playerID.addEventListener("playlistItemEnabled", function(data){ //called on playlist item enable, returns (instance, instanceName) }) mvp_playerID.addEventListener("volumeChange", function(data){ //called on volume change, returns (instance, instanceName, volume) }) mvp_playerID.addEventListener("fullscreenBeforeEnter", function(data){ //called before fullscreen enter, returns (instance, instanceName, media) }) mvp_playerID.addEventListener("fullscreenEnter", function(data){ //called on fullscreen enter, returns (instance, instanceName, media) }) mvp_playerID.addEventListener("fullscreenExit", function(data){ //called on fullscreen exit, returns (instance, instanceName, media) }) mvp_playerID.addEventListener("beforeTheaterEnter", function(data){ //called before theater enter, returns (instance, instanceName, media) }) mvp_playerID.addEventListener("beforeTheaterExit", function(data){ //called before theater exit, returns (instance, instanceName, media) }) mvp_playerID.addEventListener("beforeLoginScreen", function(data){ //called before login screen opens, returns (instance, instanceName, media) }) mvp_playerID.addEventListener("mediaDownload", function(data){ //called when video is downloaded (instance, instanceName, media) });
Ad callbacks (will trigger when ad is playing instead of "normal" media):
mvp_playerID.addEventListener("adRequest", function(data){ //called when new ad has been requested, returns (instance, instanceName, media) console.log(data.instance, data.instanceName, data.media) }) mvp_playerID.addEventListener("adStart", function(data){ //called on ad start, returns (instance, instanceName, media) }) mvp_playerID.addEventListener("adPlay", function(data){ //called on ad play, returns (instance, instanceName, media) }) mvp_playerID.addEventListener("adPause", function(data){ //called on ad pause (when ad is clicked), returns (instance, instanceName, media) }) mvp_playerID.addEventListener("adEnd", function(data){ //called on ad end, returns (instance, instanceName, media) }) mvp_playerID.addEventListener("adSkip", function(data){ //called when ad is skipped, returns (instance, instanceName, media) });
mvp_playerID is constructed from mvp_player + ID.
ID is generated automatically starting from 0 for every new player you place in page. For example, if you add one player in page, ID will be 0 (so it becomes mvp_player0).
You can also manually add instance_id in shortcode (then the plugin will use this as ID), example (This player will have ID 1):
How to add event callback in wordpress post from Text editor:
Following api methods are included:
mvp_playerID.playMedia(); //Play current media mvp_playerID.pauseMedia(); //Pause current media mvp_playerID.togglePlayback(); //Toggle current media (pause/play) mvp_playerID.nextMedia(); //Play next media mvp_playerID.previousMedia(); //Play previous media /* set volume (0-1) */ ---------------------------------- mvp_playerID.setVolume(0); //Set volume (0) mvp_playerID.setVolume(0.5); //Set volume (0.5) mvp_playerID.setVolume(1); //Set volume (1) mvp_playerID.toggleMute(); //Toggle mute mvp_playerID.toggleRandom(); //Set random playlist playback (true/false/toggle) mvp_playerID.toggleLoop(); //Set playlist loop (when playlist reaches end) (true/false/toggle) mvp_playerID.toggleInfo(); //Toggle description panel (true/false/toggle) mvp_playerID.toggleShare(); //Toggle share panel (true/false/toggle) mvp_playerID.togglePlaylist(); //Toggle playlist (true/false/toggle) mvp_playerID.toggleFullscreen(); //Toggle fullscreen /* set playback rate */ -------------------------- mvp_playerID.setPlaybackRate(0.5); //Set playback rate (0.5) mvp_playerID.setPlaybackRate(1); //Set playback rate (1) mvp_playerID.setPlaybackRate(2); //Set playback rate (2) (valid for media type: video, audio, youtube, vimeo) /* set playback quality */ -------------------------- /* self hosted video */ In Ad media section when you add urls to video you can define quality, then this quality is used to call to change video quality:mvp_playerID.setPlaybackQuality('720p'); //Set quality video (720p) mvp_playerID.setPlaybackQuality('1280p'); //Set quality video (1280p) /* subtitle */ -------------------------- Set subtitle In Ad media section when you add subtitles to video you can define Subtitle menu label, then this menu label is used to call to change subtitle:
![]()
mvp_playerID.setSubtitle('English'); //Set subtitle ('English') mvp_playerID.setSubtitle('German'); //Set subtitle ('German') mvp_playerID.setSubtitle(''); //Set subtitle off ('') /* seek (seconds) */ -------------------------- mvp_playerID.disableSeek(boolean)//disable / enable seekbar mvp_playerID.seek(0); //seek (0) mvp_playerID.seek(5); //seek (5) mvp_playerID.seek(15); //seek (15) mvp_playerID.seekBackward();//seek 5 seconds backwards mvp_playerID.seekBackward(value); //seek {value} seconds backwards (default 10) mvp_playerID.seekForward(value); //seek {value} seconds forward (default 10) mvp_playerID.seekForward();//seek 10 seconds forward /* chapters */ -------------------------- mvp_playerID.previousChapter(); //load previous chapter mvp_playerID.nextChapter(); //load next chapter /* load media by providing track data */ -------------------------- var track = { type: 'video', path: [ {quality: 'default', 'mp4': 'media/video/02.mp4'}, ], poster:'media/video/poster/02.jpg', thumb: 'media/video/thumb/02.jpg', title: 'Video title goes here 2', description:'Custom description here.', } mvp_playerID.inputMedia(track); //load this track into the player. Note: this will not add this track to playlist, it will only play video in player. If you want to add track as well, use addTrack. /* load media from playlist on demand */ -------------------------- //Load media (format, value) by counter (counting start from zero, 0 = first media, 1 = second media...) mvp_playerID.loadMedia('counter', 0); //Load first media in playlist mvp_playerID.loadMedia('counter', 2); //Load third media by media-id attribute mvp_playerID.loadMedia('id', 7); //Load media with data-media-id attribute 7 mvp_playerID.loadMedia('id', 2'); //Load media with data-media-id attribute 2 by title mvp_playerID.loadMedia('title', 'Video title here'); /* load playlist on demand */ -------------------------- mvp_playerID.loadPlaylist('.mvp-playlist-'+PLAYLIST_ID); Note: player only load playlists that exist in page. Playlist comes from shortcode playlist_id: [apmvp player_id="PLAYER_ID" playlist_id="PLAYLIST_ID"] Example, playlist with ID 5 is loaded into the player on start (there are no other playlists in page!): [apmvp player_id="1" playlist_id="5"] You can defined multiple playlist to exist in page (list them comma separated in playlist_id). Example, playlists with ID 5,6,7 exist in page. Playlist with ID 5 is loaded into the player on start (because its first listed in playlist_id): [apmvp player_id="1" playlist_id="5,6,7"] In this case you can call to load playlist ID 6 later on demand: mvp_playerID.loadPlaylist('.mvp-playlist-6'); You can also use option "Display all playlists in page" in Global settings / Miscellaneous (which will by default put all playlists from Playlist manager in page, so you dont have to manually define which playlists to exist in page in playlist_id attribute):
![]()
load playlist from object markup -------------------------- var playlist = { type: 'youtube_playlist', path: 'UCgZM50Ig7STDS0l6f_QnrXw'//playlist ID } mvp_playerID.loadPlaylistFromObject(playlist); /* add track(s) to playlist */ Add track to currently active playlist (if active playlist doesnt exist it will be created). -------------------------- //add track in data format (format, track, play_it, position) var track = { type: 'video', path: [ {quality: 'default', 'mp4': 'media/video/02.mp4'}, ], poster:'media/video/poster/02.jpg', thumb: 'media/video/thumb/02.jpg', title: 'Video title goes here 2', description:'Custom description here.', } mvp_playerID.addTrack('data', track, false, 0); //add track, position 0 mvp_playerID.addTrack('data', track, true, 2); //add track, play it, position 2 mvp_playerID.addTrack('data', track, true); //add track, play it, position end //add multiple tracks in data format (format, track, play_it, position) var track_array = [ { type: 'video', path: [ {quality: 'default', 'mp4': 'media/video/01.mp4'}, {quality: '1280p', 'mp4': 'media/video/01_1280p.mp4'}, {quality: '720p', 'mp4': 'media/video/01_720p.mp4'} ], defaultQuality:'720p', poster:'media/video/poster/01.jpg', thumb: 'media/video/thumb/01.jpg', title: 'Video title goes here', description:'Custom description. Tiam justo commodo nec vivamus dolor.', download: 'media/video/02.mp4', share: 'http://www.google.com', subtitles: [ {label: 'English', src: 'data/subtitles/sintel-en.vtt', default: true}, {label: 'German', src: 'data/subtitles/sintel-de.vtt'}, {label: 'Spanish', src: 'data/subtitles/sintel-es.vtt'} ] }, { type: 'video', path: [ {quality: 'default', 'mp4': 'media/video/02.mp4'}, ], poster:'media/video/poster/02.jpg', thumb: 'media/video/thumb/02.jpg', title: 'Video title goes here 2', description:'Custom description here.', }, { type: 'youtube_single', path: 'M4z90wlwYs8' }, ]; mvp_playerID.addTrack('data', track_array, false, 0); //add tracks, position 0 mvp_playerID.addTrack('data', track_array, true, 2); //add tracks, play it, position 2 mvp_playerID.addTrack('data', track_array, true); //add tracks, play it, position end /* remove track(s) from playlist */ -------------------------- //remove track by number (counting start from zero, 0 = first media, 1 = second media...) mvp_playerID.removeTrack('counter', 0); //remove first track mvp_playerID.removeTrack('counter', 2); //remove third track mvp_playerID.removeTrack(player.getPlaylistLength()-1); //remove last track in playlist mvp_playerID.destroyPlaylist(); //remove all tracks player.destroyPlaylistOnLightboxClose();//remove all tracks after player type lightbox close //remove track by title mvp_playerID.removeTrack('title', Video title number 1'); //remove media 'Video title number 1' mvp_playerID.removeTrack('title', 'Video title number 2'); //remove media 'Video title number 2' //remove track by media id mvp_playerID.removeTrack('id', 0); //remove track with media id 0 mvp_playerID.removeTrack('id', 0); //remove track with media id 1 /* destroy current playing media / playlist */ -------------------------- mvp_playerID.destroyMedia(); //Destroy current playing media mvp_playerID.destroyPlaylist(); //Destroy current playlist mvp_playerID.destroyInstance(); //Destroy current player and clean after mvp_playerID.getCurrentMediaData();//get media data (video, title, thumb, descritpion etc...) mvp_playerID.getPlaylistLength(); //get playlist length mvp_playerID.getSetupDone(); //get setup done (plugin inited, ready to use api) mvp_playerID.getMediaPlaying(); //get media playing /* show / hide lightbox */ -------------------------- mvp_playerID.openLightbox(); //open lightbox mvp_playerID.closeLightbox(); //close lightbox /* ad */ -------------------------- mvp_playerID.adSkip(); //skip ad /* resize */ -------------------------- mvp_playerID.resize(); //resize player so it can get correct size. Are you using this in a tab maybe where the parent container is hidden (css display none)? If so, you need to initialize the player after its being shown in tab or call player.resize() API method so the player can correctly resize itself! /* offline image */ -------------------------- //if you have offline image in settings and you want to remove it before playing a stream (or new video) mvp_playerID.setOfflineImage(); //clear offline image (no paramters) mvp_playerID.setOfflineImage(url); //set offline image (load new offline image) mvp_playerID.showOfflineImage();//show offline image (if it was previously set using setOfflineImage) mvp_playerID.hideOfflineImage();//hide offline image
![]()
mvp_playerID is constructed from mvp_player + ID.
ID is generated automatically starting from 0 for every new player you place in page. For example, if you add one player in page, ID will be 0 (so it becomes mvp_player0).
You can also manually add instance_id in shortcode (then the plugin will use this as ID), example (This player will have ID 1):
How to use API methods in wordpress text editor:
Toggle playback:
<a onclick="togglePlayback();return false;" href="#">Toggle playback </a> <script type="text/javascript"> function togglePlayback(){ mvp_playerID.togglePlayback(); return false; }; </script>
Set volume:
<a onclick="setVolume(0.5);return false;" href="#">set volume </a> <script type="text/javascript"> function setVolume(val){ mvp_playerID.setVolume(val); return false; }; </script>
Add track to playlist example (this will add track on the end of the current active playlist and play it):
<a onclick="addTrack();return false;" href="#">Add track</a> <script type="text/javascript"> function addTrack(){ var track = { type: 'video', path: [ {quality: 'hd', 'mp4': 'URL/TO/MP4/VIDEO'}, ], poster:'URL/TO/POSTER', thumb: 'URL/TO/THUMB', title: 'Video title goes here', description:'Custom description here.', } mvp_playerID.addTrack('data', track, true); return false; }; </script>
Load media by ID. Note that this only works with single media (self hosted video, audio, image, youtube or vimeo single video, hls or dash stream). It does not work for example with youtube playlist, Vimeo album or Google drive folder.
<a data-media-id="MEDIA_ID" onclick="loadMedia(this);return false;" href="#">Load media </a> <script type="text/javascript"> function loadMedia(obj){ mvp_playerID.loadMedia('media-id',obj.getAttribute("data-media-id")); return false; }; </script>
Load playlist by playlist ID. Note that you need to have Display all playlists in page option true in Edit Player / General settings / Playback tab.
<a onclick="loadPlaylist('.mvp-playlist-PLAYLIST_ID');return false;" href="#">Load playlist </a> <script type="text/javascript"> function loadPlaylist(id){ mvp_playerID.loadPlaylist(id); return false; }; </script>
Load more videos on total scroll. Works with Youtube media (playlist, channel) or Vimeo (album, group, channel). Works in conjuntion with Result limit playlist option (for example, set Result limit="50" which will show 50 videos in playlist on start, then on total scroll, it will load another 50, and so on.. (max data-limit for this option when Vimeo is used is 100).
<a onclick="loadMore();return false;" href="#">Load more </a> <script type="text/javascript"> function loadMore(){ mvp_playerID.loadMore(); return false; }; </script>
Add more. Add more media into the player from database (the same as on total scroll). Requires "Retrieve more on total scroll" option enabled in Edit playlist section / Playlist options / General tab.
<a onclick="addMore();return false;" href="#">Add more </a> <script type="text/javascript"> function addMore(){ mvp_playerID.addMore(); return false; }; </script>
Activate analytics in Edit Player / General settings / Google Analytics tab:
1. Sign in to your Google Analytics account
2. Go to the Admin panel by clicking the Cog Icon in the bottom left of your screen
3. Click on the property where you want to add custom dimensions
4. Click on Custom Definitions in the left menu, then click on Create Custom Dimension
5. Create following definitions
video_type video_name video_url current_time duration
Using custom definitions, following events will be logged:
complete play pause download
Go to Playlist manager / Edit playlist / Playlist options / Maintenance tab where you can rename all url in current playlist:
The same can be done for ads / annotation section. Go to Ad Manager / Edit ad / Maintenance tab where you can rename all urls in current ad section:
Statistics AddOn is available on the following link
First make sure addOn is activated together with main Video player plugin.
Also, make sure you have the latest compatible version of main Video player plugin.
Access Statistics settings in Player Manager / Edit Player / Statistics tab.
You can show data per individual playlist and per WordPress user.
Export individual table data:
Export all song data:
Note when using export and opening exported file, use pipe (|) sign as delimiter.
Clear statistics data. This will clear ONLY for currently selected user and playlist on the left menu.
Heatmap AddOn is available on the following link
First make sure addOn is activated together with main Video player plugin.
Also, make sure you have the latest compatible version of Modern Video player plugin.
Access Heatmap settings in Player Manager / Edit Player / General / Heatmap tab.
You can access heatmap statistics in plugin menu:
To view each video in detail, go to View Video which will open dialog where you can see video together with heatmap graph below it. You can seek through the video and compare most watched parts of each video on the graph.
To view heatmap in detail for each video, go to View Chart which will open dialog where you can see heatmap graph chart.
To view monthly data in detail for each video, go to View monthly stats which will open dialog where you can see chart.
Heatmap data is tracked for every second of video played and you can export this data in CSV in Statistics plugin menu.
Columns in CSV are as follows:
ID - media ID Type - video type Thumb - video thumbnail url Title - video title Url - video url Plays - video plays (how many times video has started). Note this is different from video finish. Total watch time - total number of seconds played Total finishes - total number video was watched till the end (this does not mean whole video was watched, just the video ended) Video duration - video duration in seconds Average engagement - Total watch time / (Total finishes * Video duration) Heatmap - heatmap data for every second of the video. On the beggining (if no data was collected), heatmap data is zero for every video second of the video. Later it increases as each part of the video has been watched repeated number of times. The higher the number, the more this part (or second) of the video has been watched.
When using heatmap with Youtube and Vimeo, heatmap only works with Youtube and Vimeo chromeless players. This means you cannot track or display heatmap graph when using Youtube and Vimeo players with their default controls.
Schedule AddOn is available on the following link
First make sure addOn is activated together with main Video player plugin.
Also, make sure you have the latest version of main Video player plugin.
Access schedule settings in Player Manager / Edit Player / Style / Schedule tab. Most important settings include setting your timezone and locale language (your region language).
You can add schedule to player in any timeframe or in general.
Which opens add schedule modal window
Sometimes some schedule you create may overlap with another schedule in which case you may get a warning. Having mutiple schedules for the same date and time period will not neccessarily cause an error in the player, but only first schedule will actually be shown (played) in the player.
Once you set up a schedule it is ready to be displayed in the player on the front page. Schedule requires a player shortcode to exist in the page. For example:
[apmvp player_id="X"]
Note that playlist_id in shortcode is not required for player with schedule set, because player will play what is set on schedule, not what is set with playlist_id
When the schedule is set on the player, if the schedule is not active at any given time, player will not be displayed. So if you add a schedule to a player, expect a player to be hidden until the schedule becomes active.
Aside from setting schedule on the player, you can also display schedule calendar in the page using the following shortcode.
[apmvp_schedule_table player_id="X" calendar_type="week"] calendar_type= week / month
This will display the same calendar which is shown in the schedule tab. This calendar is shown all the time and its not related the the player itself (except for showing player schedule times).
Shelf AddOn is available on the following link.
Shelf addOn adds option to show Youtube channel playlists and Vimeo channels, albums (showcases), groups in grid layouts. Clicking each playlist can then show all videos from that playlist in a lightbox player. Or, it can simply link to that playlist direclty on Youtube / Vimeo.
For Youtube, provide your channel ID and Shelf addon will display all playlists from your channel in grid layout in page.
For Vimeo, provide your Vimeo username and Shelf addon will display your channels, albums (showcases) or groups in grid layout in page.
First make sure addOn is activated together with main Video player plugin.
Also, make sure you have the latest version of main Video player plugin.
Set Youtube or Vimeo credentails in Modern video player Plugin menu / Global settings:
Access Shelf settings in plugin menu Modern Video Player / Shelf.
Configure shelf settings. This can also be set directly in Shelf shortcode.
Generate Shelf and player shortcode.
Note that if Thumbnail click action is set to Show videos in player lightbox, beside shelf shortcode (which will generate Shelf grid) you also need Player shortcode (which will show videos in lightbox).
This guide shows how to use player from Modern video player Player manager in shelf. Note that the following options need to be set in Player manager / Edit player for this to work.
- Supported layouts for lightbox player are Vertical right and bottom, Horizontal bottom, Vertial bottom, No playlist (use just player).
Of course you can set some of these option in shortcode as well:
[apmvp instance_id="3581" player_id="PLAYER_ID" playlist_position="vrb" playlist_style="drot" playlist_scroll_type="browser" player_type="lightbox" active_item="0" destroy_playlist_on_lightbox_close="1"]
Make sure you connect apmvp_shelf shortcode with player apmvp shortcode using random number which is the same in both shortcodes:
[apmsvp_shelf type="youtube_channel" path="UCgZM50Ig7STDS0l6f_QnrXw" connected_player="3581"] [apmvp instance_id="3581" player_id="PLAYER_ID" playlist_position="vrb" playlist_style="drot" playlist_scroll_type="browser" player_type="lightbox" active_item="0" destroy_playlist_on_lightbox_close="1"]
You can have multiple Shelf(s) in page. If you do that, its advised to have them connected to same player (connected_player / instance_id in shortcode).
Grid layout (number of columns) are set in CSS (mvp_shelf.css file)
.mvp-shelf .mvp-shelf-playlist-content{ display: grid; grid-gap: 1rem; } @container mvp_shelf_query (min-width: 700px){ .mvp-shelf-dbt .mvp-shelf-playlist-content { grid-template-columns: repeat(2, 1fr); } } @container mvp_shelf_query (min-width: 1100px){ .mvp-shelf-dbt .mvp-shelf-playlist-content { grid-template-columns: repeat(3, 1fr); } } @container mvp_shelf_query (min-width: 1800px){ .mvp-shelf-dbt .mvp-shelf-playlist-content { grid-template-columns: repeat(4, 1fr); } } @container mvp_shelf_query (min-width: 800px){ .mvp-shelf-drot .mvp-shelf-playlist-content { grid-template-columns: repeat(2, 1fr); } } @container mvp_shelf_query (min-width: 1300px){ .mvp-shelf-drot .mvp-shelf-playlist-content { grid-template-columns: repeat(3, 1fr); } } @container mvp_shelf_query (min-width: 2200px){ .mvp-shelf-drot .mvp-shelf-playlist-content { grid-template-columns: repeat(4, 1fr); } }
Volume cannot control the on Apple IOS with javascript, you have to use the physical button on the actual phone: Volume Control in JavaScript
Player and playlist export feature requires PHP zip extension enabled.
If you get this message in settings, check in cpanel on the server if you can enable zip php extension.
If you have any questions after purchase, send a message at http://codecanyon.net/user/Tean#contact, and provide your PURCHASE CODE.
Social sharing
Using Share feature
Sharing can use using default method or browser native share method (where supported).
This is controlled in Edit player / General settings / Social sharing tab.
Default method uses social sharing icons (Facebook, Twitter etc). Native share does not require these icons.
If both default and native share are used, player will first try to use native share, then if this is not supported, will fallback to default share.