The FinalWeb live streaming service is affordable and is integrated into the FinalWeb web service (with additional cost) easily. However, the default encoder and JW media players are all in a standard definition format with the square 4:3 television format. If you want to use a high definition (HD) 16:9 or 16:10 format then you are out of luck with the building in templates. But wait! With a little bit of copy and paste you can resolve this easily.
This custom code also does a few tricks:
Example page: http://www.justifiedbyfaith.net/stream
Live Stream Setup
Assumption: you are actually streaming HD content.
I recommend that you start with a live stream that is working without any issues. Use the built in template on your page and make sure that you are able to use the stream. You don't want to be troubleshooting the wrong piece of the puzzle when something goes wrong. With the built in templates you will get the video squished into the box with the black bars on the top and bottom of the window. This is good to see that you are actually sending the HD content.
Also, below that standard box you see an [EMBED PLAYER] button. When you click the button FinalWeb gives you the custom code for your website. That is where this custom code starts from and this contains some of your site specific details you will need. Copy that into a notepad space for future reference.
Creating the Video Player Page
Tip: You may want to start with these instructions in a hidden new page on your site, don't start by playing with your already working page until you are ready to do so.
On the page that you are going to be placing your player (or test page with player) follow these steps. These instructions are presuming you have the basic understanding of creating FinalWeb pages. You should create the player in a section by itself, do not add other text or elements into the same section.
This code also includes the playerID and ga code for your Google Analytics, if you are using it. If you just want to use the formatting and not autostart you can change the autostart option from true to false. I would not use the mute option because that is likely just to cause people complaining about no audio on your stream.
<p><script type="text/javascript" src="/jwplayer6/jwplayer.js"></script></p>
<div style="width: 640px; margin-left: auto; margin-right: auto;">
<div id="mediaplayer">Livestream Loading...</div>
<script type="text/javascript">
jwplayer('mediaplayer').setup({
'id': 'playerID',
'width': '640',
'height': '360',
'ga': '',
'autostart': 'true',
'mute': 'false',
'androidhls': 'true',
'sources': [
{ 'file': 'rtmp://live.finalweb.net:1935/2612xktzlhz_final/mp4:myStream' },
{ 'file': 'http://live.finalweb.net:1935/2612xktzlhz_final/smil:myStream.smil/playlist.m3u8'}
]
});
jwplayer('mediaplayer').onError(function(){
$("#mediaplayer_wrapper").html("<img src=\"/jwplayer6/video_placeholder.jpg\" width=\"640\" height=\"360\"/><span class='stream-error'><A HREF=\"http://www.justifiedbyfaith.net/site/cpage.asp?cpage_id=180065767&sec_id=180014650\">This channel is not broadcasting.<br />Services are Sundays at 8AM and 10:30AM CDT.<br />(Memorial Day to Labor Day: Services are Sunday at 9:30AM CDT.)<br />Press reload or refresh on your web browser to try again.</A></span>");
});
</script>
<style type="text/css">.stream-error{
display: block;
position: relative;
top: -290px;
background: #fff;
padding: 20px;
text-align: center;
color: #000;
font-size: 18px;
opacity: .9;
}
</style>
<!--
<div id="mediaplayer">Livestream Loading...</div>
<script type="text/javascript">
jwplayer('mediaplayer').setup({
'id': 'playerID',
'width': '640',
'height': '360',
'file': '/liveStreamPlaylist.asp?stream_id=2612xktzlhz_final',
'modes': [
{type: 'flash', src: '/jwplayer_livestream/player.swf'},
{
type: 'html5',
config: {
'file': 'http://live.finalweb.net:1935/2612xktzlhz_final/smil:myStream.smil/playlist.m3u8',
'provider': 'video'
}
}
]
});
</script>
-->
<p> </p>
</div>