Video player for the site

1. Home
2. Web development
3. Video player for the site

Many website owners want to revitalize their website as much as possible, to make it super informative. One of the ways to make a website more interesting is to put a video on the site.

Inserting a video player on a website

There are many video formats, as well as many ways to play it. I have more than once had the task of embedding a video player on a website.

Sometimes you just need to insert a video from youtube, sometimes you need to play a regular video. But there are more complicated tasks.

For example, broadcast ip camera or playlist in .asx format. I have tried a lot of all kinds of video players for the site, but still decided to stop on JW Player.

JW Player uses FLASH and HTML5 technologies and supports various audio and video formats.

JW Player Description:

• Supports FLASH and HTML5 technologies, which allows you to embed the player for playback on different devices.
• Simple skin model that allows you to customize the video player for your website.
• Flexible JavaScript API
• Support for flash and JavaScript modules.
• Supports RTMP video streaming protocol and HTTP pseudo-streaming.

Browser and device support

Besides this good news, there's more: take a look at the browser support table

Browsers	Flash	HTML5
Chrome	+	+
Firefox	+	3,5+
IE	+	9.0+
Opera	+	+
Safari	+	+

Devices	Flash	HTML5
iPhone / iPad	-	+
Android	2.2+	2.1+

Supports audio and video formats

This player supports these file formats:

• FLV/F4V
• H.264/MP4
• MP3
• AAC

Installing JW Player video player on the site

First you need to download the necessary files from the official website(link above), extract them into the folder "jwplayer". You should pay attention to two files:

1. player.swf - Flash player
2. jwplayer.js - embedded JavaScript library.

Place the fideo-file itself in the "videos" folder. For example, let's name the fideo file video.mp4. Then embed the following code on the page

 
< script type='text/javascript' src='/jwplayer/jwplayer.js'>
< script type='text/javascript'>
jwplayer('player').setup({ 'flashplayer': '/jwplayer/player.swf', 'width': '400', 'height': '300', 'file': '/videos/video.mp4' });

Watch out for the paths to the jwplayer.js, player.swf, and video.mp4 files! If you use a different layout, replace the paths to those files.