Stream live to mobile, tablets, and desktops with our new Account Portal »

This tutorial guides you through not only how to embed the JW Player 5 into multiple outlets, but also how to change the skin of the player.

  1. How to embed Using HTML
  2. How to embed Using JS
  3. How to embed Using Live RTMP Streaming
  4. How to embed Using Youtube
  5. How to embed a Playlist
  6. How to change the Skins

Files you will need (found at the JWplayer website.):

Please make sure to look for the note saying “../jwplayer/” it is VERY important.

1. How to Embed Using HTML

Make sure you change the file location (.mp4 or .flv) and verify your SWF location.

Note “../jwplayer/”

2. How to Embed Using JS

Make sure you change the file location (.mp4 or .flv) and verify your SWF and JS locations.

3. How to Embed Using Live RTMP Streaming

  • Change the file name to whatever you set your encoders stream name to. (For example: livestream)
  • Verify your SWF  location and that you have the swfobject.js or jwplayer.js in the correct location.
  • Change your RTMP server name, and make an empty folder jwplayer or live (It doesn’t matter, its just a place holder.)

Version 1:

Version 2:

Note “../jwplayer/”

Make sure FMLE is broadcasting with the correct stream, uploaded the correct javascript (swfobject or jwplayer) for the code you used. Refresh your webpage, and it will work.

4. How to Embed Using YouTube

  • Copy and paste whatever the URL is for the YouTube video into the file location.
  • Verify your SWF and JS locations.

5. How to Embed a Playlist

Edit playlist positions, size, and actually play list within [brackets].

6. How Change the Skin

Version 1: When using HTML

Note “../jwplayer/”

Version 2: When using JavaScript

Just add the parameter and the correct location of the ZIP file for the skin. Note “../jwplayer/” in skins but not .js
Hope this Tutorial helps all you JW Player and Influxis users. As always, let us know if you have any questions or need any help!

24 Responses to “How to embed JW Player”

  1. Devon

    I primarily use Tv2Beta app and am I having a difficult time transitioning to JW from the influxis player since JW seems to require a specific file name for each stream instance which would mean that for each live stream I would need to append/edit the code the stream name. Is this true?

    My scenario involving multiple streams would mean a great deal of maintenance. it would require that when the I get a drop/disconnect from the server that I change the stream in multiple places i.e. in adobe live encoder and and the stream name in the code. Currently this function is dynamic in influxis player.

    How can I offset this requirement in JW player? Am I missing something? Thanks

    Reply
    • Devon

      It would mean that if I allowed clients to stream .. they could not stream without me editing the code to name each stream. This does not seem practical.

      Reply
  2. Robert

    How to embed JW Player information very nice and useful…Thanks for Sharing…
    jw player

    Reply
  3. Cal

    Hi, Somehow i cant get the title to be display on the player itself, could anyone help on this?

    Thanks!

    Reply
  4. Max Web

    is it possible to insert a rtmp-stream url into flashvars?

    e.g. flashvars=”file=rtmp://stream.url

    can you please reply the complete script like the examples above (HTML). Thanks

    Reply
  5. Emre

    Hi, I couldn’t find any related article about that if there was a chance to give allowfullscreen:false parameter when implementing usingJS way
    like:

    jwplayer(‘mediaplayer’).setup({



    ‘addParam’ : {
    ‘allowfullscreen’: false
    },
    ‘sources’ : [{
    'file': 'rtmp://url..'
    },{
    'file': 'https://hls_source_url...'
    }]
    });

    or else…? because i need to use different protocols, HLS and RTMP in the same implementation on user-agent dependency.

    Reply
  6. kannan

    Dear All,

    I have tried to configure to player video. but can’t able to play with jwplayer fancy box. Please suggest me. this is my code.
    Right now when click that link it is redirecting to other page and downloading it that video. but i want to play same page with fancy box jwplayer. Please help me.

    < class="”>
    <a href="” target=”_blank”>
    >

    Thanks.

    Reply
  7. kannan

    Dear All,
    This is a code

    < class="”>
    <a href="” target=”_blank”>
    >

    Thanks.

    Reply
  8. Muhammad Sarmad Mahmood Malik

    Where rtmp code is added…. Inside the html body ?

    Reply
  9. elham

    hi
    I want to set the url of video file inside the jwplayer source code and then build it. would you mind help to get that? I want to know which file in src folder of jwplayer exactly (jwplayer folder that has not been build) should be changed.
    thanks.

    Reply
  10. Jw player error when embed code youtube video - HTML CODE

    […] i need help. i have problem jw player embed code using youtube i had tried follow tutorial on next link: how embed using youtube […]

    Reply
  11. Erisco

    Hello author, how to add media file from tusfiles or acefiles or google drive content on jwplayer ? i’ve try link video from tusfiles but error in jwplayer, please help me :(((

    Reply
  12. video terbaru

    how to embed google drive video to jw player? or how to make source code google drive video embedder to jw player

    Reply
  13. Anime Sub Indo

    Nice Info.. Thanks bro :)

    Reply
  14. Top Movies 31

    How To Create a gdrive video embed with jwplayer brrooooh ?

    Reply
  15. The Bali Advisor

    Yes I need the code how to embed gdrive video

    Reply

Leave a Reply

Current day month ye@r *