Created: 15/08/2014
Updated: 27/04/2015
By: Nilok Bose
Email: cosmocoder@gmail.com
Thank you for purchasing my item. 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 here. Thanks so much!
Vimuse Player WP makes it easy to embed the Vimuse – HTML5 Media Player, available at Codecanyon, in your Wordpress theme, and it allows you to play both audio and video in a modern and sleek interface. You can choose to play your own audio/video files or videos from Youtube/Vimeo/Dailymotion or even Shoutcast streams. The player features a fluid responsive design and can fit in any screen size ranging from mobile phones to desktop browsers. The player is also optimized for retina and touch screens and provides the feel of a native app.
Vimuse plays audio/video using HTML5 in supported browsers and fallbacks to Flash in older browsers. You can pass only a mp4 file for video and mp3 file for audio or pass all the necessary formats for the widest possible support of native HTML5 playback. Whatever you choose to do the player will work in both modern and old browsers (with suitable fallbacks where necessary).
Vimuse Player WP allows you to create multiple players and you can embed multiple players in a single post/page. This holds true for a multi-site setup also.
To install the plugin follow the steps below:
After activating the plugin you will see that a new menu item has been created on the left sidebar called Vimuse Player. This menu item has two sub menus - Player Manager and Create New Player. These names are self explanatory and whenever you want to create a new player you will head over to the Create New Player page, and all your existing players will be listed in the Player Manager page, from where you can edit or delete or clone players, and also get the shortcodes for embedding players.
So first of all to create a new player head over to the appropriate page and you will be presented with a list of options. They are described below:
You must provide a name to the player that you are going to create. This is a required field and you will receive an error if you leave it empty. Although different players can have the same name but it is advisable that you provide unique names so that it is helpful for you to quickly differentiate between players.
You can write a description for the player here. This field is optional.
A list of options that are applicable to the player, which have been divided into 4 categories and can be accessed by clicking on the corresponding tabs. Their functions are described as follows:
en, fr, de, etc.). If you leave this field blank then no subtitle will be shown when the video starts playing, until the user chooses one.A list of options when you choose to build a playlist based on a Youtube feed. Their functions are described as follows:
A list of options when you choose to build a playlist based on a Vimeo feed. Their functions are described as follows:
A list of options when you choose to build a playlist based on a Dailymotion feed. Their functions are described as follows:
If you choose to add your own items to the playlist then you will be shown this section. You are first given two options:
There are three ways of adding an item to the playlist here - a) Upload Files, b) Add Youtube/Vimeo/Dailymotion Video and c) Add Radio Stream. Whenever you add a new item it shows up in the grid below. All items in the grid are sortable and you can drag and change their order which will be reflected in the front-end playlist.
When you click the "Upload Files" button then the Wordpress Media Library modal will be shown and there you can either upload your own files and select them, or you can select some previously uploaded files. Note that you can upload and select multiple files here, and for each selected file a corresponding item will be created and shown in the grid below.
When you click the "Add Youtube/Vimeo/Dailymotion Video" button then a modal box will be shown where you will be prompted to enter the Youtube/Vimeo/Dailymotion video url. All Youtube url's should be of the form http://youtube.com/watch?v=abcdefghijk, and all Vimeo url's should be of the form http://vimeo.com/12345678, and all Dailymotion url's should be of the form http://dai.ly/abcdef. If you deviate from the above url formats then things won't work correctly. On successfull entry a new item will be added to the playlist grid.
When you click the "Add Radio Stream" button then a modal box will be shown where you will be prompted to enter the radio stream url. For shoutcast the url should be of the form http://11.22.33.44:8000/ (basically the url needs to have the ip number and the port number). Sometimes the shoutcast streaming url's have ";" at the end, and sometimes they have other parts at the end (such as http://77.92.64.44:8228/stream), which are acceptable too.
Whenever a new item is added an appropriate icon will be used to represent it in the grid. Even after you provide a poster/cover image for an item the icon representing that item's type will be shown in the top-right corner to help you quickly distinguish between all your items.
A delete icon is also shown below each item in the playlist grid, which when clicked will not only delete the item but also all associated audio/video files and poster/cover images. The file deletion happens immediately, so if you delete an item but not save the player settings and then reload the page then the item will still be present in the grid but all associated files will be missing.
When a new item is added to the playlist grid then you will see an edit icon at the bottom of that item, on clicking which a modal box will be shown with some input fields. The input fields will vary based on the type of item. If all necessary details for an item have been provided then you will see a green checkmark icon on the top-left of the item. If all necessary details have not been provided then you will see an orange alert icon. Even though the orange alert icon is shown for an audio item you can let the plugin try to pull all the necessary info for that file from ID3 tags. If that does not work for some audio files then you can provide all the details yourself, including the poster/cover. If you have chosen the option then the plugin can also try to pull track info from the shoutcast/icecast servers. If the shoutcast/icecast server is password protected and the plugin is unable to pull the info then you will be alerted of that fact in the details modal, so that you can provide all the necessary info yourself. Note that the title (or track name for audio) that you enter in the details modal will also be in the title attribute for that item, so that when you hover over that item in the grid you can see the entered title and thus enabling you to quickly identify your items.
For audio/video items you will see in the details modal that multiple fields have been provided to enter various file formats for the same item. In order to have native HTML5 playback in the widest possible range of browsers these formats are necessary. These formats are mp4, webm and ogv for videos and mp3 and ogg for audios. Note that you can also just provide a mp4 file for a video and an mp3 file for an audio item and the plugin will play it with Flash in unsupported browsers.
For video items you have the option of providing a low resolution mp4 file (you also need to enable the detection of mobile devices for this to take effect). Providing a low resolution file is entirely optional and if it is missing then the plugin will server the original mp4 file to mobile browsers.
You also have the option of providing subtitle files for your video items through the details modal. The subtitle files can be either webvtt or srt with utf-8 encoding. The subtitle file names should have the ISO language code appended with a hyphen, like this mysub-en.srt.
In the details modal you can also choose if the file associated with that item will be made downloadable. If you have associated multiple formats with an item then for videos the mp4 file will be made downloadable and for audios it will be the mp3 file. You can also pass a name that will be applied to the downloaded file, which will only work in browsers that support the HTML5 "download" attribute.
Whenever you want to create a new player then the form on that page will be filled out with default option values, so that you only have to create the playlist items in order to make your player work. You can just change the settings that you want to customise and save the player settings. Needless to say, whenever you are going to edit an existing player, the same page will open and all the form fields will be filled out with the settings with which you created the player.
Different browsers require different file formats for native playback of HTML5 audio and video. For audio you must upload a mp3 version of the file which is supported by Safari, Chrome and IE9. You must upload an ogg version if you want to have native playback in Firefox and Opera. The ogg format is also supported by Chrome. But you can upload only the mp3 version and plugin will use Flash to play the audio file in Firefox and Opera. Similarly for the case of video playback, if you want to have a wide range of browsers natively play the video, then you must upload mp4, webm and ogv versions of the video. But here also you can only upload a mp4 version (h.264) and the plugin will use Flash or Silverlight to play the video in browsers that do not support that format.
If you use only mp4 (h.264) videos and find that when there is Flash fallback in unsupported browsers, the entire video needs to be downloaded before it can be watched, then the index of the mp4 file is placed at the end. To remedy this case use the utility QTIndexSwapper on your mp4 files. If you find that after uploading Vimuse Player to your server your browser is not able to play video files then you may need to configure your server in order to enable it to stream video files. For an Apache server place the following code in an .htaccess file and place it at the root of your website.
AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm
Some servers may also not be configured to have the correct mime-type for the webvtt and srt subtitle files. In that case add the following mime-types to your server.
AddType text/plain .srt AddType text/vtt .vtt
All the players that you create will be visible in the Player Manager page. When you go to that page you will see that each player has a field in the table titled shortcode. In this field you will see the shortcode that is required for embedding a particular player. Just copy the shortcode for a player, that is displayed there and then head over to Posts/Pages section in Wordpress. Open any post/page where you want to have a player, in the Wordpress editor, and then paste the shortcode at a place where you find suitable, and then save or publish that post/page. Then open that post/page in your browser and you will see the player in action with all the settings that you created it with. If you want to directly write the embed code in a Wordpress template file then you will have to use the do_shortcode function. Using this function has the advantage that you can embed a player in a part of the Wordpress template where content is not pulled using the Wordpress Loop. An example usage of this function to embed a player is:
<?php echo do_shortcode('[vimuse id="1"]'); ?>
If you need embed the plugin shortcode in a widget but you see that it is not working there then you will need to enable the processing of shortcodes in widgets, which is disabled by default in Wordpress. In order to enable shortcodes in widgets insert the following line in your theme's functions.php file
add_filter('widget_text', 'do_shortcode');
IE8 and below needs a special javascript file to be declared in the header of your WP theme, in the <head>, in order to make it recognize new HTML5 tags that are required to make the entire player work correctly. You should declare the file in the header in the following way:
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
IE also needs the CSS3 PIE file in order for modern CSS3 styles that this player uses, to be rendered there. You must place the PIE.htc file that is present in the css folder of the plugin (for IE8 and below), and in the root of your site (for IE9) so that it is loaded in IE. Also IE9 is very strict regarding mime-types, so if you find that the htc file is not being loaded in IE9 then you must set the correct mime-type as
AddType text/x-component .htc
I hope that you like this item and it makes your web page more stunning. If you find any bugs then don't hesitate to let me know. Also if you want to see some new features in this item or have any ideas to make the overall item much better then you can send me the details. All future updates are of course free !
Once again, thank you so much for purchasing this item. As I said at the beginning, I'd be glad to help you if you have any questions relating to this item. No guarantees, but I'll do my best to assist. If you have a more general question relating to the items on Codecanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Nilok Bose