10 Great Media Players to Add Video to Your WordPress Site Effectively

by in WordPress on 19th Nov 2012 · Comments

One way to provide unique and viable content to your WordPress site is to add a video player. With a video player, you can stream live audio and video content or provide users with such content on demand. Video content will keep users engaged and on your site for longer periods of time.

10 Great Media Players to Add Video to Your WordPress Site Effectively

Additionally, video content is popular. Many users who will not take the time to read an article will engage in watching a video with the same information. Also, videos are a great way to convey instructions. For example, if you are attempting to describe how to remove the screen from a laptop computer, a video of the process is much easier for the user to grasp than a series of steps in an article.

10 Media Players to Add Video to Your WordPress Site

WordPress is such a versatile and extensible platform that several video player plug-ins are now available for use on WordPress sites. With these WordPress plug-ins, adding video to a WordPress site is generally easy to accomplish. When you serve video through your WordPress site, the video files must “live” somewhere. Generally, video files can be quite large depending on the quality, length and format.

Content distribution networks provide WordPress site owners with space to store their video files. Many media players utilize a specific content distribution network, or “CDN,” to store and deliver content to their player. Most CDN providers also encode video content to stream through their player.

With automated encoding, CDNs that serve video and WordPress video player plug-ins, providing video content on your WordPress site is no long complex and time consuming. The Top 5 WordPress video player plug-ins that add functionality and power to your site include:

1. Cincopa WordPress Video Player Plug-in

The Cincopa WordPress video player plug-in is one of the best options for serving video on a WordPress site. Cincopa’s plugin is free to download. You can customize the plug-in with a choice of 17 skins. The skins set the height and width of the video as you specify, and some skins provide additional features, such as a playlist.

You can also brand your player with your own logo and colors. Cincopa offers a CDN for storage. You can upload raw video footage through the web application and the tool automatically encodes and compresses the video into a compatible format with the best quality and speed possible. The Cincopa video encoder accepts just about any video file type. You can embed videos from other video sites, too, such as YouTube and Vimeo. Simply enter the URL into the WordPress page and you are good to go.

Cincopa WordPress Video Player Plug-in

Cincopa makes money through its CDN. The company provides a free account with limited storage space and bandwidth. However, for a relatively low annual fee, you can drastically increase the space and bandwidth for your CDN account. Also, with the free version of Cincopa, you can use the plug-in on only one site.

With the paid version, you may use the plug-in on an unlimited number of sites and your video is delivered in high definition. Finally, the free version is branded with the Cincopa logo and the “Powered by Cincopa” statement. The paid account also receives premium-level support from the company, which is to be expected.

2. ProPlayer

ProPlayer is a great WordPress video player that is available in a WordPress plug-in. Several skins are available that enable you to stretch or shrink your video to your specified size. Proplayer serves video from the popular video sites, such as Vimeo, YouTube and Veoh. Configuring the plug-in is simple.

ProPlayer

You simply open the plug-in’s Settings page and enter the URL to the YouTube or other video service’s video. You can also enter the URL to a YouTube playlist and you can enter multiple videos simply by separating the URLs with a comma. The ProPlayer plugin is available free of charge.

3. JW Player

JW Player 6 is the world's most popular HTML5/Flash embeddable media player for websites. It supports a wide array of platforms (including robust mobile support) and media formats. It is open-source and easy to configure, customize and extend. JW Player is free for non-commercial use.

JW Player

JW Player also offers robust integrations with the popular WordPress CMS. The custom-built integrations enable an easy setup of the JW Player and the quick embedding of audio/video content onto your site.

4. Stream Video Player

Touted as being the best streaming video player plug-in for WordPress, the Stream Video Player offers loads of features. Pseudo-streaming allows the user to jump ahead in videos without waiting for the entire video to download. This video player supports mobile devices, such as the iPhone, iPad and iPod Touch.

Stream Video Player

This player supports sharing of URLs and video sharing on social media sites. The Stream Video Player plug-in is available in multiple languages, as well.

5. VideoJS WordPress Plug-in

VideoJS is an HTML5 video player plug-in for WordPress. The plug-in is based on the code for the most popular HTML5 video player in the world, VideoJS.

VideoJS WordPress Plug-in

This player falls back to Flash video support for non-HTML5 enabled browsers. View a demo of the VideoJS player here

6. Video LightBox

Video LightBox JS is a free wizard program that helps you easily embed video to website, web page or blog, in a few clicks without writing a single line of code.

Video LightBox

7. SublimeVideo

SublimeVideo is the most reliable HTML5 Video Player on the Web. It supports any device or browser and integrates seamlessly with your existing web page, so you don't need to worry about whether or not your audience will be able to watch your video. You can download the plugin from the WordPress Plugin Directory.

SublimeVideo

8. MediaElement.js

MediaElement.js is an HTML5 video and audio player with Flash fallback and captions. Supports IE, Firefox, Opera, Safari, Chrome, iPhone and iPad.

MediaElement.js

9. HD Webplayer

HD Webplayer is an ultimate video platform that makes the intricate process of publishing videos online comfortable. You can download HD Webplayer for WordPress here.

HD Webplayer

10. Flowplayer

Flowplayer is the video player for web. Version 5 is raw HTML5 and CSS3 and Flash only simulates the native VIDEO tag. Designed for modern sites where speed and user experience matters. The free version comes with a GPL-based license and carries a Flowplayer logo. Commercial use is allowed.

Flowplayer

Utilizing a CDN for Streaming Video

If you use a video player to simply display videos from other sites, such as YouTube or Vimeo, just about any player will suffice. However, if you need to stream your own video content, you will likely want to store your video files on a CDN, also known as cloud storage.

One such cloud storage service is Amazon’s Cloudfront web service. Serving streaming video using this Amazon CDN is accomplished by first creating Amazon accounts on Cloudfront and S3 and then uploading your content into the storage.

To store video to embed on your website using Amazon Cloudfront:

  1. Create an account on both Amazon web service sites, S3 and Cloudfront.
  2. Once you have created accounts for both services, create a new access key. Create a new access key by visiting the AWS Security Credentials page. Once on the page, click the “Create a New Access Key” option.
  3. Click the “Access Keys” tab and then click “Create a New Access Key.” The Access Key is generated. Click the “Show” option to show the key. The key’s ID is displayed next to the date the key was created.
  4. Next, you will create a bucket in S3 to hold your video files. Navigate to the S3 AWS Management Console. Click the “Create Bucket” option in the “Buckets” section of the management console. Type a name for your new bucket in the “Bucket Name” input box. For example, type “streamcontent.yourdomain.com” where “yourdomain.com” is the the name of your own domain.
  5. In the “Region” section, leave the “US Standard” option if you are in the midwest or in the east of the U.S. If you live in the west, click the dropdown box and select “Northern California.”
  6. Click the “Create” button. The bucket is created.
  7. Next, you will create a Cloudfront distribution for your content. Navigate to the Cloudfront AWS Management Console. Click the “Create Distribution” button.
  8. In the Delivery Method section, click the “Streaming” radio button.
  9. In the Origin dropdown box, select the bucket you created for S3. The list should populate with all of your existing buckets. Simply select the newly created one that you generated to hold your streaming content.
  10. Click the radio button next to “Off” in the Logging section.
  11. Click the radio button next to “Enabled” in the Distribution Status section.
  12. Click the “Create” button. The Cloudfront distribution is created. The generation of the distribution will take a few minutes. Once the distribution is created, the “State” colume will list “Deployed.” A new Cloudfront domain name will be generated. The Cloudfront domain name will look like “atvxja18lc8.cloudfront.net." Copy this domain name and save it somewhere, such as in a text file.
  13. Finally, you can upload your video files to your S3 bucket. To do this, open the S3 Console.
  14. Click the “Upload” option in the Objects and Folders section.
  15. Click the “Add Files” option. The File Add navigation box opens. Navigate to and click on the video file to upload and then click “Open.” The file uploads into your S3 bucket. Note that you can only serve properly encoded MP4 or FLV videos from the Cloudfront CDN storage. Simply upload the FLV file with no changes. You will need to rename MP4 files after the upload, which will be covered in a later step.
  16. Click the “Set Permissions” button and then check the checkbox next to the “Make Everything Public” option.
  17. Click the “Start Upload” button. The file uploads to your CDN storage bucket.
  18. Once the video has been uploaded, a few edits will need to be performed. Next to the “rtmp://” label, you will see input boxes for the “Domain Name"and the “File Name.” In the “Domain Name” input box, copy and paste the Cloudfront domain name string you saved to the text file earlier.
  19. In the “File Name” input box, type the name of the video file. If the file is an MP4 file, prefix the file name with “MP4:” No prefix is necessary if the file is an FLV file. The link will be displayed.
  20. Copy the entire link and paste into a text file. This will be the link to your streaming media in the CDN storage.
  21. Use the copied link in any WordPress (or other) video player for playback.

Conclusion

Many options are available for displaying video on your WordPress site. You can use a service, such as Cincopa, to provide CDN storage service along with the proprietary media player plug-in for WordPress. Alternatively, you can use any media player plug-in and then use a CDN service, such as Amazon Cloudfront, to serve your video.

Offering video to users on your WordPress site is as simple as installing a plug-in and setting up the URL to the streaming video.

How do you display video on your site? What type of media player do you use? Please share with us in the comments box.

Aidan Huang is a web enthusiast and ingenious blogger who loves all things design, interesting and technology. He is the editor-in-chief at Onextrapixel and have founded several other interesting blogs. Do keep in touch with him on Facebook and follow him on Twitter.