Difficulty: Advanced
————————————————-

Requirements:

  1. Website with root access.
  2. An Influxis HTML 5 portal account.
  3. Adobe Flash Media Encoder 3.2 or Open Broadcaster.
  4. JW player 5 folder contents installed in the root of the website (or correct directory).
  • Adobe Media Encoder is free to download and can be located following the link below.

https://www.adobe.com/cfusion/entitlement/index.cfm?e=fmle3

  • JW player is free to download and can be located following the link below.

http://www.longtailvideo.com/players/jw-flv-player/

The JW player folder must be installed in the root of your website (or appropriate location) and contain the appropriate files.

The following embed code can be used to have the player appear in your web site for Desktop, Android and IOS devices.

Things to change:

  • Change the Influxis Mobile Account in 2 places (ex: appliction)
    • Make sure after your mobile RTMP path has _live at the end of it.
    • Change the Stream Name in 2 places (ex: Stream_Name)
      • FMLE settings must match the name of the live stream

Things to note:

  • Make sure the jwplayer.js and player.swf are in the correct locations.
  • The MediaPlayer name will need to match and be unique
    • (No two JWPlayers can have the same name)

<center>
<script type=’text/javascript’ src=’../jwplayer/jwplayer.js’></script>
<div id=’mediaplayer’>This div will be replaced by the JW Player</div>
<script type=’text/javascript’>
jwplayer(‘mediaplayer’).setup({
width: 640,
height: 480,
provider: “rtmp”,
streamer: “rtmp://rtmpid.influxis.com/application“,
autostart: “true”,
levels: [
{ bitrate: 350, file: “Stream_Name“, width: 640}
],
modes: [
{type: “flash”, src: “../jwplayer/player.swf”},
{type: “html5″,
config: {provider: “http”,
file: “http://rtmpid.cloud.influxis.com:1935/application/Stream_Name/playlist.m3u8″,
}
}
]
});
</script>
</center>

Recap the changes:

  1. The application needs to be changed to your HTML 5 account RTMP application path.
  2. The Stream_Name which is red needs to be changed to your stream name.

Once you have updated all the information and placed the code into your web site you are ready to start your live broadcast and make it available to all devices.

Please review the RTMP paths provided in your HTML 5 portal under the live streaming tab. Depending on the version the paths may differ slightly.

 

Happy Streaming!

-Robert

For any questions or concerns, please contact support@influxis.com.

3 Responses to “Embed JW Player 5 into your website to play a Live Broadcast visible to PC, iOS and Android.”

  1. Robert

    All new portal accounts make it easy to stream to mobile and provide a simple share link or to embed in your site.
    You can also use this builder to stream to mobile if you have have a new portal account.
    http://robertdev.influxis.com/videos/php/newl.php

    Reply
  2. Jason

    I am testing JW player.

    actually, I want my site to play Stream(recording from Gocoder) from wowza.
    So, I made a code like this (reference to you, maybe you know)

    JW Player

    jwplayer.key = “f5ee/zXM7QOdSGBP7IZAS7t1Me0AMKVkVN4P/g==”;

    jwplayer(“player”).setup({

    ‘provider’ : ‘rtmp’,
    ‘streamer’ : ‘rtmp://10.177.170.54:1935/live’,
    ‘file’ : ‘myStream’,
    primary : ‘flash’,
    /* autostart: ‘true’, */
    repeat: ‘always’,
    height: ’360′,
    width: ’640′,
    rtmp: {
    subscribe: true
    }

    });

    Could you help me?

    Reply
  3. tutorialsplane

    Thanks For this Post !!!

    Reply

Leave a Reply

Current day month ye@r *