Customized HD Live Stream Player in FinalWeb

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:

    • The stream begins upon load of the page, no more click on the video to start the live stream.
    • A custom error message that actually makes sense when your are not broadcasting.
    • Plays the video in the letterbox (16:9) format by default.
    • Invokes a operating system neutral HTML5 player and when necessary Flash on some mobile devices.

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.

  1. On your page add a new section, text/image blocks type with "no image" selected.
  2. Click the [Source] button in the upper left hand corner of the text editor tool.
  3. Copy the HTML/Javascript from the code block below into the editor tool.
  4. Un-click the [Source] button and you should see the text Livestream Loading... appear in the editor tool.
  5. Click the [Source] button again to reveal the source code.
  6. There are several highlighted elements in the code block that you need to update.
    1. Stream ID (purple)
        1. Identify the stream_id= in the emed code you copied in the previous section. It will looking similar to 2612xktzlhz_final as shown below.
      1. Update the four places that you need to replace with your stream_id.
      2. Width and Height (blue)
        1. The width and height is a proportion of what you are sending.
        2. The code below is showing 640x360, which is half of 720p HD format.
        3. This is the default size. If you change one you need to adjust the other in direct proportion.
      3. Error Message Customization
        1. When your channel is not streaming this will present a custom error message.
        2. Change the red URL to the page that you want to load when the error message is clicked, probably should be your streaming page.
        3. Also change the orange text of the error message, be careful this is a variable in the script and using ', " or \ will invoke Javascript and html formatting.
    2. Click [Source] to commit the HTML to the editor.
    3. Click [Save Changes] to save your page to the web sever.
    4. Upon the page load the player should automatically start playing. If you are streaming you should see the stream and if you are not you should see the error message. Time to do your testing. Once you are happy with results you can copy your code from your test page into your main page. Remember not to delete or move your page, you should update it, because of your viewers bookmarks will be broken if you do.

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>&nbsp;</p>
</div>