MP4 Video Embed

JW Player supports playback of multiple media formats: video files, audio files, YouTube videos, RSS playlists and adaptive streams. This article explains how to embed a basic video file. Here is an example:

 

Although JW Player supports various video file formats, this example uses MP4, since that format plays across all desktop browsers (Chrome, Firefox, Internet Explorer, Safari) and mobile devices (iOS, Android). We strongly suggest to always use MP4 video. In terms of dimensions, use something like 640 by 360 pixels (roughly TV quality). That size works great on all desktop browsers and mobile devices.

Step 1: Add the library to your <head>

In order to embed media with JW Player, you first have to add the player library to the head of your HTML page (or elsewhere above the actual embed). The player library can be found in your JW Player account and looks like this:

<script src="http://jwpsrv.com/library/YOUR_JW_PLAYER_ACCOUNT_TOKEN.js" ></script>

The JW Player library is Cloud-Hosted by us, making it fast & reliable, secure and always up-to-date with the latest mobile devices and web standards. If you want to host the player library yourself (e.g. if you have an intranet), you should download the Self-Hosted version of JW Player from the account. There's no functional difference between the two.

If you are self-hosting our player, you will need to point to your copy of jwplayer.js and also define your self-hosted license key. Here's a code example:

​<script src="/jwplayer/jwplayer.js" ></script>
<script>jwplayer.key="ABCdeFG123456SeVenABCdeFG123456SeVen==";</script>

If you are using a trial key to test our player, you will need to define your trial key after you have linked to the cloud hosted player. Here's a code example:

​<script src="http://jwpsrv.com/library/abcdefghijklmnop123.js" ></script>
<script>jwplayer.key="ABCdeFG123456SeVenABCdeFG123456SeVen==";</script>

Don't forget to change the domain to https://ssl.jwpsrv.com if you require secure hosting of the player library.

Step 2: Add the embed code to your <body>

With the player library set up, it's time to actually embed the video. Therefore, insert this HTML in your page, at the exact location you want the video to appear:

<div id="myElement">Loading the player...</div>
<script type="text/javascript">
    jwplayer("myElement").setup({
        file: "http://example.com/uploads/myVideo.mp4",
        image: "http://example.com/uploads/myPoster.jpg",
        width: 640,
        height: 360
    });
</script>

In this code, the <div> element is used as a container to load JW Player into. It must have a unique id attribute. The setup() block defines which video file and preview image to load, as well as the width and height of the player in pixels. The poster image is optional, but it provides a nice preview of the video before starting playback.

Two common issues prevent smooth playback of videos in Internet Explorer 9+. First, always start your HTML document with <!DOCTYPE html> to prevent triggering IE's quirks mode. Second, serve up your videos with the video/mp4 mimetype or IE will refuse to play them.

Next Steps

With this basic embed live, you can look into adding customizations like an HD quality toggle, different player skin or responsive design support. See the Customization section for more information.

If things are not yet working out, see our troubleshooting guide for a list of common embedding issues.

Please sign in to leave your feedback for this article.

Still don't have JW Player? Get It Here