Expression Encoder - 2020

codecs logo
Bookmark and Share




bogotobogo.com site search:









Publishing Contents using Expression Encoder 4 SP2

Open Expression Encoder.

ExpressionEncoderSilverlightProject

Choose Silverlight project.



bogotobogo.com site search:

Import a file: DELTA.MPG

ImportAMPG.png

Select VC-1 IIS Smooth Streaming-HD 720p VBR under the IIS Smooth Streaming, and click Apply.

SelectApply.png

We may want to select template, but this time we opted not to.

Template.png

After redirecting the output directory, press Encode button.

EncodeStart.png

We can see the progress.

EncodingProgress.png

Here is the list of files created by Express Encoder when it's done.

DemoFiles.png



Connecting IIS Media Service to the contents

Go to IIS Manager and create a site to link:

AddWebSite.png

Type in the directory which the files that Expression Encoder vreated.

AddWebSiteB.png

Select Browse.

Browse.png

Initially, we may get 404 error, however, after adding Default.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<!-- saved from url=(0014)about:internet -->

<head>
    <style type="text/css">
    html, body {
        height: 100%;
        overflow: auto;
    }
    body {
        padding: 0;
        margin: 0;
    }
    .fadeSome {
        opacity:0.30;
        filter:alpha(opacity=30);
        -moz-opacity: 30%;        
    }
    .fadeLots {
        opacity:0.50;
        filter:alpha(opacity=50);
        -moz-opacity: 0.5;        
    }  
    .fadeCompletely {
        opacity:0.0;
        filter:alpha(opacity=0);
        -moz-opacity: 0.0;
    }     
    #silverlightControlHost {
        height: 100%;
    }
    </style>
    
    <script type="text/javascript">
        function onSilverlightError(sender, args) {

            var appSource = "";
            if (sender != null && sender != 0) {
                appSource = sender.getHost().Source;
            }
            var errorType = args.ErrorType;
            var iErrorCode = args.ErrorCode;

            var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n";

            errMsg += "Code: " + iErrorCode + "    \n";
            errMsg += "Category: " + errorType + "       \n";
            errMsg += "Message: " + args.ErrorMessage + "     \n";

            if (errorType == "ParserError") {
                errMsg += "File: " + args.xamlFile + "     \n";
                errMsg += "Line: " + args.lineNumber + "     \n";
                errMsg += "Position: " + args.charPosition + "     \n";
            }
            else if (errorType == "RuntimeError") {
                if (args.lineNumber != 0) {
                    errMsg += "Line: " + args.lineNumber + "     \n";
                    errMsg += "Position: " + args.charPosition + "     \n";
                }
                errMsg += "MethodName: " + args.methodName + "     \n";
            }

            throw new Error(errMsg);
        }

        function highlightDownloadArea(fOn) {
            document.getElementById("overlay").className = (fOn) ? "fadeSome" : "fadeLots";            
        }

	function CloseWindow()
	{
	    window.close();
	}
    </script>
</head>


<body>
    <!-- Runtime errors from Silverlight will be displayed here.
    This will contain debugging information and should be removed or hidden when debugging is completed -->
    <div id='errorLocation' style="font-size: small;color: Gray;"></div>

    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight," type="application/x-silverlight" width="100%" height="100%">
            <param name="source" value="MediaPlayerTemplate.xap"/>
            <param name="onerror" value="onSilverlightError" />
            <param name="autoUpgrade" value="true" />
            <param name="minRuntimeVersion" value="4.0.50826.0" />
            <param name="enableHtmlAccess" value="true" />
            <param name="enableGPUAcceleration" value="true" />
            <param name="initparams" value='playerSettings = 
                        <Playlist>
                            <AutoLoad>false</AutoLoad>
                            <AutoPlay>false</AutoPlay>
                            <AutoRepeat>false</AutoRepeat>
                            <DisplayTimeCode>false</DisplayTimeCode>
                            <EnableOffline>true</EnableOffline>
                            <EnablePopOut>true</EnablePopOut>
                            <StartAudioVolume>10</StartAudioVolume>
                            <SetFocusOnStartup>true</SetFocusOnStartup>
                            <SetHtmlPageTitle>false</SetHtmlPageTitle>
                            <EnableCaptions>true</EnableCaptions>
                            <EnableCachedComposition>true</EnableCachedComposition>
                            <StretchNonSquarePixels>StretchToFill</StretchNonSquarePixels>
                            <StartMuted>false</StartMuted>
                            <StaysFullScreenWhenUnfocused>true</StaysFullScreenWhenUnfocused>
                            <StartWithPlaylistShowing>false</StartWithPlaylistShowing>
                            <Items>               
				<PlaylistItem>
					<AudioCodec></AudioCodec>
					<Description></Description>
					<FileSize>11922946</FileSize>
					<IsLive>false</IsLive>
					<IsAdaptiveStreaming>true</IsAdaptiveStreaming>
					<MediaSource> DELTA.ism%5CManifest</MediaSource>
					<ThumbSource></ThumbSource>
					<Title>DELTA</Title>
					<DRM>false</DRM>
					<IsSrsAudio>false</IsSrsAudio>
					<VideoCodec>VC1</VideoCodec>
					<FrameRate>23.9760431376968</FrameRate>
					<Width>1152</Width>
					<Height>720</Height>
					<AspectRatioWidth>1.6</AspectRatioWidth>
					<AspectRatioHeight>1</AspectRatioHeight>
				</PlaylistItem>
                            </Items>
                        </Playlist>'/>       
            <!--  unused valid silverlight init parameters
            <param name="enableFrameRateCounter" value="bool" />
            <param name="enableRedrawRegions" value="bool" />
            <param name="maxFrameRate" value="int" />
            <param name="allowHtmlPopupWindow" value="bool"/>
            <param name="background" value="colorValue"/>
            <param name="splashScreenSource" value="uri"/>
            <param name="fullScreen" value="bool"/>
            <param name="onFullScreenChanged" value="functionname"/>
            <param name="onResize" value="functionname"/>
            <param name="onSourceDownloadComplete" value="functionname"/>
            <param name="onSourceDownloadProgressChanged" value="functionname"/>
            <param name="windowLess" value="bool"/>
             --> 

             <div onmouseover="highlightDownloadArea(true)" onmouseout="highlightDownloadArea(false)">
                    <img src="" style="position:absolute;width:100%;height:100%;border-style:none;" onerror="this.style.display='none'"/>
                    <img src="Preview.png" style="position:absolute;width:100%;height:100%;border-style:none;" onerror="this.style.display='none'"/>                                            
                    <div id="overlay" class="fadeLots" style="position:absolute;width:100%;height:100%;border-style:none;background-color:white;"/>
                    <table width="100%" height="100%" style="position:absolute;">
                        <tr><td align="center" valign="middle"><img src="http://go2.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"/></td></tr>
                    </table>                   
                    <a href="http://go2.microsoft.com/fwlink/?LinkID=149156">
                        <img src="" class="fadeCompletely" style="position:absolute;width:100%;height:100%;border-style:none;" alt="Get Microsoft Silverlight"/>
                    </a>                   
             </div>             
        </object>
        <iframe id='_sl_historyFrame' style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>
</body> 
</html>

Here we can see the Smooth Stream:

Browser_Default_html.png

Actually, it's the result of processing the manifest as shown in the picture below:

manifest.png




Live Broadcasting Smooth Streaming
Setting up Expression Encoder 4 Broadcast

In this section, I'll show how to create a Live Smooth Streaming broadcast in Microsoft Expression Encoder 4 and push it to the Live Smooth Streaming publishing point that we configured in Smooth Streaming on iis 8 - Live Smooth Streaming .

The steps in this section outline a general workflow, with details only on the specific tasks that we need to create Live Smooth Streaming output.

After starting Expression Encoder, in the Load a new project dialog box, select Live Broadcasting Project:

LiveBroadcastingProject.png

We'll use File Sources, so select "Add a File Source" from Preview pane or "File" from the top menu:

AddFileSource.png

bunny_avi.png

The input file is here: big_buck_bunny_480p.avi

Then, click Cue in the "File Sources" pane:

CueFileSource.png

In the "Preset", select the Output Format for IIS Smooth Streaming, and hit "Apply":

PresetApply.png

In the "Output" tab, check "Streaming", and type "http://localhost/bunnyLive/LiveSmoothStream.isml" into "Publishing Point" to which the Encoder push the live contents. Then, press "Connect":

PublishingPointConnect.png

Press "Start":

StartButton.png

EncoderPreview.png

Files used in the example: DeomFiles.zip





Playing Live Streaming

Open up a browser, and type http://localhost/bunnyLive/SmoothStreamingPlayer.html as a url, then we see the live stream:

LiveStreamOnBrowser.png





SmoothStreamingPlayer.html

Here is the SmoothStreamingPlayer.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
    <title>Smooth Streaming Player</title>
    <style type="text/css">
    html, body {
	    height: 100%;
	    overflow: auto;
    }
    body {
	    padding: 0;
	    margin: 0;
    }
    #silverlightControlHost {
	    height: 100%;
	    text-align:center;
    }
    </style>
    <script type="text/javascript">
        function onSilverlightError(sender, args) {
            var appSource = "";
            if (sender != null && sender != 0) {
              appSource = sender.getHost().Source;
            }
            
            var errorType = args.ErrorType;
            var iErrorCode = args.ErrorCode;

            if (errorType == "ImageError" || errorType == "MediaError") {
              return;
            }

            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;

            errMsg += "Code: "+ iErrorCode + "    \n";
            errMsg += "Category: " + errorType + "       \n";
            errMsg += "Message: " + args.ErrorMessage + "     \n";

            if (errorType == "ParserError") {
                errMsg += "File: " + args.xamlFile + "     \n";
                errMsg += "Line: " + args.lineNumber + "     \n";
                errMsg += "Position: " + args.charPosition + "     \n";
            }
            else if (errorType == "RuntimeError") {           
                if (args.lineNumber != 0) {
                    errMsg += "Line: " + args.lineNumber + "     \n";
                    errMsg += "Position: " +  args.charPosition + "     \n";
                }
                errMsg += "MethodName: " + args.methodName + "     \n";
            }

            throw new Error(errMsg);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server" style="height:100%">
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
		  <param name="source" value="SmoothStreamingPlayer.xap"/>
		  <param name="onError" value="onSilverlightError" />
		  <param name="background" value="white" />
		  <param name="minRuntimeVersion" value="4.0.50401.0" />
		  <param name="autoUpgrade" value="true" />
         <!-- original 
          <param name="InitParams" value="selectedcaptionstream=textstream_eng,
               mediaurl=http://streams.smooth.vertigo.com/elephantsdream/Elephants_Dream_1024-h264-st-aac.ism/manifest" />
         -->

         <!-- updated -->
          <param name="InitParams" value="selectedcaptionstream=textstream_eng,
               mediaurl=http://localhost/bunnyLive/LiveSmoothStream.isml/manifest" />

		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v;=4.0.50401.0" style="text-decoration:none">
 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
		  </a>
	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
    </form>
</body>
</html>






LiveSmoothStream.isml

The LiveSmoothStream.isml looks like this:

<?xml version="1.0" encoding="utf-8"?>
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
  <head>
    <meta name="title" content="" />
    <meta name="module" content="liveSmoothStreaming" />
    <meta name="sourceType" content="Push" />
    <meta name="publishing" content="Fragments;Streams;Archives" />
    <meta name="estimatedTime" content="600" />
    <meta name="lookaheadChunks" content="2" />
    <meta name="manifestWindowLength" content="0" />
    <meta name="startOnFirstRequest" content="True" />
    <meta name="archiveSegmentLength" content="0" />
    <meta name="formats" content="" />
    <meta name="filters" content="" />
  </head>
  <body>
  </body>
</smil>






Files in the localhost
Files_used.png

They are available bunnyLive.zip







Ph.D. / Golden Gate Ave, San Francisco / Seoul National Univ / Carnegie Mellon / UC Berkeley / DevOps / Deep Learning / Visualization

YouTubeMy YouTube channel

Sponsor Open Source development activities and free contents for everyone.

Thank you.

- K Hong






Sponsor Open Source development activities and free contents for everyone.

Thank you.

- K Hong







Video Streaming



Adaptive Live Streaming with Sorenson Squeeze - HLS, Smooth Stream, and MPEG-DASH

Digital Image Processing - JPEG Compression

FFmpeg on Linux - Audio Video Transcoding Mux Demux

FFmpeg on Windows

FFmpeg Video Capture from Webcam

FFmpeg Http Live Streaming - HLS

FFmpeg Command Options

FFmpeg Smooth Streaming

HTTP vs RTMP

Mobile - Streaming

MPEG-4 Successor H.265/HEVC

MPEG Dynamic Adaptive Streaming over HTTP (MPEG-DASH)

P2P Streaming

Streaming - Mobile

Screen Recording (mp4/ogg) and HTML5 Video

Smooth Streaming on iis 8

Smooth Streaming on Nginx/Apache

Smooth Streaming - Expression Encoder

Streaming (Data Traffic) - Optimization

Video Streaming Sites

VLC - How to Capture Screen to a Video File using VLC

VLC - Live Streaming over http using VLC

VLC - Live Streaming over RTP using VLC

VLC - Transcoding using VLC

VLC - Downloading a YouTube Video using VLC

Downloading YouTube, Vimeo etc Videos using youtube-dl

Using youtube-dl embedded with Python

Dissecting Youtube URL with Python