oldmonad · May 7, 2025 18:45 · Oct 29, 2018 · Jan 27, 2017 · Jan 27, 2017 · Jan 27, 2017
diff --git a/gistfile1.md b/gistfile1.md
@@ -9,7 +9,7 @@ Adaptive Streaming has become the neccessity for streaming video and audio. Unfo
 
 ### Set up three S3 buckets
 In AWS go to their S3 service and create 3 buckets. You can name them whatever you want. I reccomend appending -in, -out, and -thumbs to each for easy organization.
-![S3 Buckets](http://spreadtruth.com/test/videojs-dash/ss-s3-buckets.png "S3 Buckets")
+![S3 Buckets](http://downtownollies.com/images/gists/ss-s3-buckets.png "S3 Buckets")
 
 ### Upload your video
 Upload your video to your *-in* bucket. Then in your *-out* bucket create 2 folders named: `dash` and `hls`
@@ -19,22 +19,22 @@ Under AWS Services navigate to the Elastic Transcoder.
 
 Here we first need to create a new pipeline. Think of a the pipeline as a queue that connects your -in and -out buckets.
 
-![Pipeline](http://spreadtruth.com/test/videojs-dash/ss-pipeline.png "Pipeline")
+![Pipeline](http://downtownollies.com/images/gists/ss-pipeline.png "Pipeline")
 
 
 Now that we have a pipeline let's create a Job that will transcode our video for MPEG-DASH. If we created our outpute folders and uploaded our video correctly we should see them as options when we select the empty fields here. So start your job as so:
 
-![Transcode 1](http://spreadtruth.com/test/videojs-dash/ss-transcode-1.png "Transcode 1")
+![Transcode 1](http://downtownollies.com/images/gists/ss-transcode-1.png "Transcode 1")
 
 
 Now we need to specify how many different video quality segments we want for our streaming. This is where we define the bitrate magic that allows our video to stream different qualities based on a user's connectivity. First select the DASH preset for the highest quality. A good segment duration is 10 seconds. For the output key I like to use the naming convention you see in the screenshot. Repeat the process for the different DASH quality presets as well as for the audio preset. We can have the job created thumbnails here and output them to our -thumbs bucket but I'm going to ignore that step and upload my own thumbs manaually later.
 
-![Transcode 2](http://spreadtruth.com/test/videojs-dash/ss-transcode-2.png "Transcode 2")
-![Transcode 3](http://spreadtruth.com/test/videojs-dash/ss-transcode-3.png "Transcode 3")
+![Transcode 2](http://downtownollies.com/images/gists/ss-transcode-2.png "Transcode 2")
+![Transcode 3](http://downtownollies.com/images/gists/ss-transcode-3.png "Transcode 3")
 
 
 Once we have all our presets we need to add them to a playlist which will be the manifest file (.mpd) which we are going to name `index`. This file is what we feed our video player in the javascript later.
-![Transcode 4](http://spreadtruth.com/test/videojs-dash/ss-transcode-4.png "Transcode 4")
+![Transcode 4](http://downtownollies.com/images/gists/ss-transcode-4.png "Transcode 4")
 
 Now run your job. Once it's complete you should see the output of your dash files and index.mpd file in the dash folder in your -out S3 bucket.
 
@@ -44,8 +44,8 @@ With CloudFront we will use Amazon's CDN for delivering our content to the user
 For Origin Domain Name select your -out folder to be the origin. What's next is important. For Cache Behaviors be sure to select allowed HTTP Methods for GET, HEAD, OPTIONS and then check the OPTIONS box for Cached HTTP Methods. Then Whitelist Forward Headers as seen in the screenshot below. Everything else leave the defaults and create the distribution. It will take a little while (20-30 min) for CloudFront to process the distribution. Once it's finsihed you can access your files from your cloudfront domain name which will look something like: `https://d106r1lp4z33yd.cloudfront.net`
 
 
-![CF 1](http://spreadtruth.com/test/videojs-dash/ss-cf-1.png "CF 1")
-![CF 2](http://spreadtruth.com/test/videojs-dash/ss-cf-2.png "CF 2")
+![CF 1](http://downtownollies.com/images/gists/ss-cf-1.png "CF 1")
+![CF 2](http://downtownollies.com/images/gists/ss-cf-2.png "CF 2")
 
 Lastly back in your S3 buckets, hilight your -out bucket and under it's Properties select the *Add CORS Configuration* button and add the xml below to it. This allows your access to be cross origin.
 

diff --git a/gistfile1.md b/gistfile1.md
@@ -119,16 +119,16 @@ var videoElement = document.getElementsByTagName("video")[0];
 //check the browser headers to determine if coming from iOS or not
 //and store result in isIOS var.
 if(isIOS) {
-      manifest = "index.m3u8";
+      manifest = "hls/index.m3u8";
       mimeType = "application/x-mpegURL";
   } else {
-      manifest = "index.mpd";
+      manifest = "dash/index.mpd";
       mimeType = "application/dash+xml";
  }
   
 var myPlayer = videojs(videoElement, { "controls": true, "autoplay": true, "preload": "auto", "fluid" : "true" });
 myPlayer.src({
-    src: 'https://d106r1lp4z33yd.cloudfront.net/dash/' + manifest,
+    src: 'https://d106r1lp4z33yd.cloudfront.net/' + manifest,
     type: mimeType
 });
 

diff --git a/gistfile1.md b/gistfile1.md
@@ -143,4 +143,5 @@ myPlayer.play();
 Boom. If you want to add a poster graphic for your video, upload a graphic to your *-thumbs* S3 bucket and link like so:
 ```html
 <video ... poster="link_here">. 
-```Consider setting up a second CloudFront service to point to the -thumbs bucket and be sure to make the thumb image permission public. 
+```
+Consider setting up a second CloudFront service to point to the -thumbs bucket and be sure to make the thumb image permission public. 
diff --git a/gistfile1.md b/gistfile1.md
@@ -140,4 +140,7 @@ myPlayer.play();
 </html>
 ```
 
-Boom. If you want to add a poster graphic for your video, upload a graphic to your *-thumbs* S3 bucket and link like so <video ... poster="link_here">. Consider setting up a second CloudFront service to point to the -thumbs bucket and be sure to make the thumb image permission public. 
+Boom. If you want to add a poster graphic for your video, upload a graphic to your *-thumbs* S3 bucket and link like so:
+```html
+<video ... poster="link_here">. 
+```Consider setting up a second CloudFront service to point to the -thumbs bucket and be sure to make the thumb image permission public. 
diff --git a/gistfile1.md b/gistfile1.md
@@ -140,4 +140,4 @@ myPlayer.play();
 </html>
 ```
 
-Boom. If you want to add a poster graphic for your videos just link to the thumbnail you upload in your *-thumbs* S3 bucket. Consider setting up a second CloudFront service to point to this bucket and be sure to make the thumb image permission public. 
+Boom. If you want to add a poster graphic for your video, upload a graphic to your *-thumbs* S3 bucket and link like so <video ... poster="link_here">. Consider setting up a second CloudFront service to point to the -thumbs bucket and be sure to make the thumb image permission public. 
diff --git a/gistfile1.md b/gistfile1.md
@@ -8,7 +8,7 @@ Adaptive Streaming has become the neccessity for streaming video and audio. Unfo
  - [videojs-dash.min.js](https://github.com/videojs/videojs-contrib-dash/releases/)
 
 ### Set up three S3 buckets
-You can name them whatever you want. I reccomend appending -in, -out, and -thumbs to each for easy organization.
+In AWS go to their S3 service and create 3 buckets. You can name them whatever you want. I reccomend appending -in, -out, and -thumbs to each for easy organization.
 ![S3 Buckets](http://spreadtruth.com/test/videojs-dash/ss-s3-buckets.png "S3 Buckets")
 
 ### Upload your video
@@ -138,4 +138,6 @@ myPlayer.play();
 ```html
 </script>
 </html>
-```
+```
+
+Boom. If you want to add a poster graphic for your videos just link to the thumbnail you upload in your *-thumbs* S3 bucket. Consider setting up a second CloudFront service to point to this bucket and be sure to make the thumb image permission public. 
diff --git a/gistfile1.md b/gistfile1.md
@@ -1,4 +1,4 @@
-Adaptive Streaming has become the neccessity for streaming video and audio. Unfortantely, as of this post, there isn't a whole lot of tutorials that accumilate all of the steps to get this working. Hopefully this post achieves that. This post focuses on using Amazon Web Services (AWS) to transcode for HLS and DASH and be the Content Delivery Network (CDN) that delivers the stream to your web page. We'll be using Video.js for the HTML5 player as well as javascript support libaries to make Video.js work with HLS and DASH. 
+Adaptive Streaming has become the neccessity for streaming video and audio. Unfortantely, as of this post, there isn't a whole lot of tutorials that accumulate all of the steps to get this working. Hopefully this post achieves that. This post focuses on using Amazon Web Services (AWS) to transcode for HLS and DASH and be the Content Delivery Network (CDN) that delivers the stream to your web page. We'll be using Video.js for the HTML5 player as well as javascript support libaries to make Video.js work with HLS and DASH. 
 
 #### So Here's what you need:
  - [An AWS Account](https://aws.amazon.com/)

diff --git a/gistfile1.md b/gistfile1.md
@@ -126,11 +126,14 @@ if(isIOS) {
       mimeType = "application/dash+xml";
  }
   
-myPlayer = videojs(videoElement, { "controls": true, "autoplay": true, "preload": "auto", "fluid" : "true" });
+var myPlayer = videojs(videoElement, { "controls": true, "autoplay": true, "preload": "auto", "fluid" : "true" });
 myPlayer.src({
     src: 'https://d106r1lp4z33yd.cloudfront.net/dash/' + manifest,
     type: mimeType
 });
+
+myPlayer.play();
+
 ```
 ```html
 </script>

diff --git a/gistfile1.md b/gistfile1.md
@@ -12,7 +12,7 @@ You can name them whatever you want. I reccomend appending -in, -out, and -thumb
 ![S3 Buckets](http://spreadtruth.com/test/videojs-dash/ss-s3-buckets.png "S3 Buckets")
 
 ### Upload your video
-Upload your video to your -in bucket. Then in your -out bucket create 2 folders named: `dash` and `hls`
+Upload your video to your *-in* bucket. Then in your *-out* bucket create 2 folders named: `dash` and `hls`
 
 ### Use the Elastic Transcoder 
 Under AWS Services navigate to the Elastic Transcoder.
@@ -80,9 +80,9 @@ Know that AWS says it could take up to 24 hours for everything to propigate to a
 ```html
 <html>
 <head>
-    <link href="/js/vendor/video-js/video-js.css" rel="stylesheet">
+    <link href="/js/video-js/video-js.css" rel="stylesheet">
     <!-- If you'd like to support IE8 -->
-    <script src="/js/vendor/video-js/ie8/videojs-ie8.min.js"></script>
+    <script src="/js/video-js/ie8/videojs-ie8.min.js"></script>
 </head>
 <body>
     <video id="story_video" class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered" controls width="500" height="281" poster="">

diff --git a/gistlog.yml b/gistlog.yml
@@ -0,0 +1 @@
+published: true
diff --git a/gistfile1.md b/gistfile1.md
@@ -118,12 +118,12 @@ var videoElement = document.getElementsByTagName("video")[0];
 
 //check the browser headers to determine if coming from iOS or not
 //and store result in isIOS var.
-if(!isIOS) {
-      manifest = "index.mpd";
-      mimeType = "application/dash+xml";
-  } else {
+if(isIOS) {
       manifest = "index.m3u8";
       mimeType = "application/x-mpegURL";
+  } else {
+      manifest = "index.mpd";
+      mimeType = "application/dash+xml";
  }
   
 myPlayer = videojs(videoElement, { "controls": true, "autoplay": true, "preload": "auto", "fluid" : "true" });

diff --git a/gistfile1.md b/gistfile1.md
@@ -103,20 +103,21 @@ Know that AWS says it could take up to 24 hours for everything to propigate to a
 ```
 ```javascript
 
-//Callback to disable debugging logging
+//Optional Callback to disable debugging logging
 var dashjsCallback = function(player, mediaPlayer) {
     // Log MediaPlayer messages through video.js
     if (videojs && videojs.log) {
         mediaPlayer.getDebug().setLogToBrowserConsole(false);
     }
 };
 
-//Add  theCallback hook
+//Add the Callback hook from above
 videojs.Html5DashJS.hook('beforeinitialize', dashjsCallback);
 
 var videoElement = document.getElementsByTagName("video")[0];
 
 //check the browser headers to determine if coming from iOS or not
+//and store result in isIOS var.
 if(!isIOS) {
       manifest = "index.mpd";
       mimeType = "application/dash+xml";

diff --git a/gistfile1.md b/gistfile1.md
@@ -98,9 +98,10 @@ Know that AWS says it could take up to 24 hours for everything to propigate to a
 <script src="/js/video-js-hls/videojs-contrib-hls.min.js"></script>
 <script src="/js/video-js-dash/dash.all.min.js"></script>
 <script src="/js/video-js-dash/videojs-dash.min.js"></script>
+
+<script>
 ```
 ```javascript
-<script>
 
 //Callback to disable debugging logging
 var dashjsCallback = function(player, mediaPlayer) {
@@ -129,5 +130,8 @@ myPlayer.src({
     src: 'https://d106r1lp4z33yd.cloudfront.net/dash/' + manifest,
     type: mimeType
 });
+```
+```html
 </script>
+</html>
 ```
diff --git a/gistfile1.md b/gistfile1.md
@@ -77,7 +77,7 @@ Know that AWS says it could take up to 24 hours for everything to propigate to a
 
 ### Client Implemenation
 
-```
+```html
 <html>
 <head>
     <link href="/js/vendor/video-js/video-js.css" rel="stylesheet">

diff --git a/gistfile1.md b/gistfile1.md
@@ -77,6 +77,7 @@ Know that AWS says it could take up to 24 hours for everything to propigate to a
 
 ### Client Implemenation
 
+```
 <html>
 <head>
     <link href="/js/vendor/video-js/video-js.css" rel="stylesheet">

diff --git a/gistfile1.md b/gistfile1.md
@@ -77,3 +77,56 @@ Know that AWS says it could take up to 24 hours for everything to propigate to a
 
 ### Client Implemenation
 
+<html>
+<head>
+    <link href="/js/vendor/video-js/video-js.css" rel="stylesheet">
+    <!-- If you'd like to support IE8 -->
+    <script src="/js/vendor/video-js/ie8/videojs-ie8.min.js"></script>
+</head>
+<body>
+    <video id="story_video" class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered" controls width="500" height="281" poster="">
+        <p class="vjs-no-js">
+            To view this video please enable JavaScript, and consider upgrading to a web browser that
+            <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
+        </p>
+    </video>
+
+</body>
+
+<script src="/js/video-js/video.js"></script>
+<script src="/js/video-js-hls/videojs-contrib-hls.min.js"></script>
+<script src="/js/video-js-dash/dash.all.min.js"></script>
+<script src="/js/video-js-dash/videojs-dash.min.js"></script>
+```
+```javascript
+<script>
+
+//Callback to disable debugging logging
+var dashjsCallback = function(player, mediaPlayer) {
+    // Log MediaPlayer messages through video.js
+    if (videojs && videojs.log) {
+        mediaPlayer.getDebug().setLogToBrowserConsole(false);
+    }
+};
+
+//Add  theCallback hook
+videojs.Html5DashJS.hook('beforeinitialize', dashjsCallback);
+
+var videoElement = document.getElementsByTagName("video")[0];
+
+//check the browser headers to determine if coming from iOS or not
+if(!isIOS) {
+      manifest = "index.mpd";
+      mimeType = "application/dash+xml";
+  } else {
+      manifest = "index.m3u8";
+      mimeType = "application/x-mpegURL";
+ }
+  
+myPlayer = videojs(videoElement, { "controls": true, "autoplay": true, "preload": "auto", "fluid" : "true" });
+myPlayer.src({
+    src: 'https://d106r1lp4z33yd.cloudfront.net/dash/' + manifest,
+    type: mimeType
+});
+</script>
+```
diff --git a/gistfile1.md b/gistfile1.md
@@ -63,11 +63,11 @@ Lastly back in your S3 buckets, hilight your -out bucket and under it's Properti
 
 That's it for setting up our video for adaptive streaming. Now DASH has become a standard but as of this post Apple (*wave's fist*) uses their own format in HLS. We need to do this so we can support iOS devices. So repeat the process we did with DASH by transcoding for HLS. Use the `hls` folder for the output then select HLS-Video and HLS-Audio presets and use the HLS-v4 playlist option.
 
-Link to DASH manifest:
+Example link to DASH manifest:
 
 https://d106r1lp4z33yd.cloudfront.net/dash/index.mpd
 
-Link to HLS Manifest:
+Example link to HLS Manifest:
 
 https://d106r1lp4z33yd.cloudfront.net/hls/index.m3u8
 

diff --git a/gistfile1.md b/gistfile1.md
@@ -73,5 +73,7 @@ https://d106r1lp4z33yd.cloudfront.net/hls/index.m3u8
 
 To test everything works you can try loading in the url to your manifest [Here](http://mediapm.edgesuite.net/dash/public/nightly/samples/dash-if-reference-player/index.html)
 
+Know that AWS says it could take up to 24 hours for everything to propigate to all their CloudFront servers.
+
 ### Client Implemenation
 
diff --git a/gistfile1.md b/gistfile1.md
@@ -64,8 +64,11 @@ Lastly back in your S3 buckets, hilight your -out bucket and under it's Properti
 That's it for setting up our video for adaptive streaming. Now DASH has become a standard but as of this post Apple (*wave's fist*) uses their own format in HLS. We need to do this so we can support iOS devices. So repeat the process we did with DASH by transcoding for HLS. Use the `hls` folder for the output then select HLS-Video and HLS-Audio presets and use the HLS-v4 playlist option.
 
 Link to DASH manifest:
+
 https://d106r1lp4z33yd.cloudfront.net/dash/index.mpd
+
 Link to HLS Manifest:
+
 https://d106r1lp4z33yd.cloudfront.net/hls/index.m3u8
 
 To test everything works you can try loading in the url to your manifest [Here](http://mediapm.edgesuite.net/dash/public/nightly/samples/dash-if-reference-player/index.html)

diff --git a/gistfile1.md b/gistfile1.md
@@ -63,9 +63,9 @@ Lastly back in your S3 buckets, hilight your -out bucket and under it's Properti
 
 That's it for setting up our video for adaptive streaming. Now DASH has become a standard but as of this post Apple (*wave's fist*) uses their own format in HLS. We need to do this so we can support iOS devices. So repeat the process we did with DASH by transcoding for HLS. Use the `hls` folder for the output then select HLS-Video and HLS-Audio presets and use the HLS-v4 playlist option.
 
-##### Link to DASH manifest:
+Link to DASH manifest:
 https://d106r1lp4z33yd.cloudfront.net/dash/index.mpd
-##### Link to HLS Manifest
+Link to HLS Manifest:
 https://d106r1lp4z33yd.cloudfront.net/hls/index.m3u8
 
 To test everything works you can try loading in the url to your manifest [Here](http://mediapm.edgesuite.net/dash/public/nightly/samples/dash-if-reference-player/index.html)

diff --git a/gistfile1.md b/gistfile1.md
@@ -63,9 +63,9 @@ Lastly back in your S3 buckets, hilight your -out bucket and under it's Properti
 
 That's it for setting up our video for adaptive streaming. Now DASH has become a standard but as of this post Apple (*wave's fist*) uses their own format in HLS. We need to do this so we can support iOS devices. So repeat the process we did with DASH by transcoding for HLS. Use the `hls` folder for the output then select HLS-Video and HLS-Audio presets and use the HLS-v4 playlist option.
 
-### Link to DASH manifest:
+##### Link to DASH manifest:
 https://d106r1lp4z33yd.cloudfront.net/dash/index.mpd
-### Link to HLS Manifest
+##### Link to HLS Manifest
 https://d106r1lp4z33yd.cloudfront.net/hls/index.m3u8
 
 To test everything works you can try loading in the url to your manifest [Here](http://mediapm.edgesuite.net/dash/public/nightly/samples/dash-if-reference-player/index.html)

diff --git a/gistfile1.md b/gistfile1.md
@@ -47,7 +47,28 @@ For Origin Domain Name select your -out folder to be the origin. What's next is
 ![CF 1](http://spreadtruth.com/test/videojs-dash/ss-cf-1.png "CF 1")
 ![CF 2](http://spreadtruth.com/test/videojs-dash/ss-cf-2.png "CF 2")
 
+Lastly back in your S3 buckets, hilight your -out bucket and under it's Properties select the *Add CORS Configuration* button and add the xml below to it. This allows your access to be cross origin.
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
+    <CORSRule>
+        <AllowedOrigin>*</AllowedOrigin>
+        <AllowedMethod>GET</AllowedMethod>
+        <MaxAgeSeconds>3000</MaxAgeSeconds>
+        <AllowedHeader>*</AllowedHeader>
+    </CORSRule>
+</CORSConfiguration>
+```
 
 That's it for setting up our video for adaptive streaming. Now DASH has become a standard but as of this post Apple (*wave's fist*) uses their own format in HLS. We need to do this so we can support iOS devices. So repeat the process we did with DASH by transcoding for HLS. Use the `hls` folder for the output then select HLS-Video and HLS-Audio presets and use the HLS-v4 playlist option.
 
+### Link to DASH manifest:
+https://d106r1lp4z33yd.cloudfront.net/dash/index.mpd
+### Link to HLS Manifest
+https://d106r1lp4z33yd.cloudfront.net/hls/index.m3u8
+
+To test everything works you can try loading in the url to your manifest [Here](http://mediapm.edgesuite.net/dash/public/nightly/samples/dash-if-reference-player/index.html)
+
 ### Client Implemenation
+
diff --git a/gistfile1.md b/gistfile1.md
@@ -41,11 +41,13 @@ Now run your job. Once it's complete you should see the output of your dash file
 ### Setup the CloudFront Distribution
 With CloudFront we will use Amazon's CDN for delivering our content to the user based on the best Edge Server to their location. Under AWS Services navigate to CloudFront and Create a new distribution. Then select *Get Started* for a *Web* distribution.
 
-For Origin Domain Name select your -out folder to be the origin. What's next is important. For Cache Behaviors be sure to select allowed HTTP Methods for GET, HEAD, OPTIONS and then check the OPTIONS box for Cached HTTP Methods. Then Whitelist Forward Headers as seen in the screenshot below. Everything else leave the defaults and create the distribution.
+For Origin Domain Name select your -out folder to be the origin. What's next is important. For Cache Behaviors be sure to select allowed HTTP Methods for GET, HEAD, OPTIONS and then check the OPTIONS box for Cached HTTP Methods. Then Whitelist Forward Headers as seen in the screenshot below. Everything else leave the defaults and create the distribution. It will take a little while (20-30 min) for CloudFront to process the distribution. Once it's finsihed you can access your files from your cloudfront domain name which will look something like: `https://d106r1lp4z33yd.cloudfront.net`
 
 
 ![CF 1](http://spreadtruth.com/test/videojs-dash/ss-cf-1.png "CF 1")
 ![CF 2](http://spreadtruth.com/test/videojs-dash/ss-cf-2.png "CF 2")
 
 
 That's it for setting up our video for adaptive streaming. Now DASH has become a standard but as of this post Apple (*wave's fist*) uses their own format in HLS. We need to do this so we can support iOS devices. So repeat the process we did with DASH by transcoding for HLS. Use the `hls` folder for the output then select HLS-Video and HLS-Audio presets and use the HLS-v4 playlist option.
+
+### Client Implemenation
diff --git a/gistfile1.md b/gistfile1.md
@@ -48,4 +48,4 @@ For Origin Domain Name select your -out folder to be the origin. What's next is
 ![CF 2](http://spreadtruth.com/test/videojs-dash/ss-cf-2.png "CF 2")
 
 
-That's it for setting up our video for adaptive streaming. Now DASH has become a standard but as of this post Apple (*wave's fist*) uses their own format in HLS. So repeat the process we did with DASH by transcoding for HLS. Use the `hls` folder for the output then select HLS-Video and HLS-Audio presets and use the HLS-v4 playlist option.
+That's it for setting up our video for adaptive streaming. Now DASH has become a standard but as of this post Apple (*wave's fist*) uses their own format in HLS. We need to do this so we can support iOS devices. So repeat the process we did with DASH by transcoding for HLS. Use the `hls` folder for the output then select HLS-Video and HLS-Audio presets and use the HLS-v4 playlist option.
diff --git a/gistfile1.md b/gistfile1.md
@@ -36,7 +36,7 @@ Now we need to specify how many different video quality segments we want for our
 Once we have all our presets we need to add them to a playlist which will be the manifest file (.mpd) which we are going to name `index`. This file is what we feed our video player in the javascript later.
 ![Transcode 4](http://spreadtruth.com/test/videojs-dash/ss-transcode-4.png "Transcode 4")
 
-Now run your job. Once it's complete you should see the output of your dash files and index.mpd file in your -out S3 bucket.
+Now run your job. Once it's complete you should see the output of your dash files and index.mpd file in the dash folder in your -out S3 bucket.
 
 ### Setup the CloudFront Distribution
 With CloudFront we will use Amazon's CDN for delivering our content to the user based on the best Edge Server to their location. Under AWS Services navigate to CloudFront and Create a new distribution. Then select *Get Started* for a *Web* distribution.
@@ -47,3 +47,5 @@ For Origin Domain Name select your -out folder to be the origin. What's next is
 ![CF 1](http://spreadtruth.com/test/videojs-dash/ss-cf-1.png "CF 1")
 ![CF 2](http://spreadtruth.com/test/videojs-dash/ss-cf-2.png "CF 2")
 
+
+That's it for setting up our video for adaptive streaming. Now DASH has become a standard but as of this post Apple (*wave's fist*) uses their own format in HLS. So repeat the process we did with DASH by transcoding for HLS. Use the `hls` folder for the output then select HLS-Video and HLS-Audio presets and use the HLS-v4 playlist option.
diff --git a/gistfile1.md b/gistfile1.md
@@ -42,6 +42,8 @@ Now run your job. Once it's complete you should see the output of your dash file
 With CloudFront we will use Amazon's CDN for delivering our content to the user based on the best Edge Server to their location. Under AWS Services navigate to CloudFront and Create a new distribution. Then select *Get Started* for a *Web* distribution.
 
 For Origin Domain Name select your -out folder to be the origin. What's next is important. For Cache Behaviors be sure to select allowed HTTP Methods for GET, HEAD, OPTIONS and then check the OPTIONS box for Cached HTTP Methods. Then Whitelist Forward Headers as seen in the screenshot below. Everything else leave the defaults and create the distribution.
+
+
 ![CF 1](http://spreadtruth.com/test/videojs-dash/ss-cf-1.png "CF 1")
 ![CF 2](http://spreadtruth.com/test/videojs-dash/ss-cf-2.png "CF 2")
 
diff --git a/gistfile1.md b/gistfile1.md
@@ -38,3 +38,10 @@ Once we have all our presets we need to add them to a playlist which will be the
 
 Now run your job. Once it's complete you should see the output of your dash files and index.mpd file in your -out S3 bucket.
 
+### Setup the CloudFront Distribution
+With CloudFront we will use Amazon's CDN for delivering our content to the user based on the best Edge Server to their location. Under AWS Services navigate to CloudFront and Create a new distribution. Then select *Get Started* for a *Web* distribution.
+
+For Origin Domain Name select your -out folder to be the origin. What's next is important. For Cache Behaviors be sure to select allowed HTTP Methods for GET, HEAD, OPTIONS and then check the OPTIONS box for Cached HTTP Methods. Then Whitelist Forward Headers as seen in the screenshot below. Everything else leave the defaults and create the distribution.
+![CF 1](http://spreadtruth.com/test/videojs-dash/ss-cf-1.png "CF 1")
+![CF 2](http://spreadtruth.com/test/videojs-dash/ss-cf-2.png "CF 2")
+
diff --git a/gistfile1.md b/gistfile1.md
@@ -27,7 +27,7 @@ Now that we have a pipeline let's create a Job that will transcode our video for
 ![Transcode 1](http://spreadtruth.com/test/videojs-dash/ss-transcode-1.png "Transcode 1")
 
 
-Now we need to specify how many different video quality segments we want for our streaming. This is where we define the bitrate magic that allows our video to stream different qualities based on a user's connectivity. First select the DASH preset for the highest quality. A good segment duration is 10 seconds. For the output key I like to use the naming convention you see in the screenshot. Repeat the process for the different DASH quality presets as well as for the audio preset.
+Now we need to specify how many different video quality segments we want for our streaming. This is where we define the bitrate magic that allows our video to stream different qualities based on a user's connectivity. First select the DASH preset for the highest quality. A good segment duration is 10 seconds. For the output key I like to use the naming convention you see in the screenshot. Repeat the process for the different DASH quality presets as well as for the audio preset. We can have the job created thumbnails here and output them to our -thumbs bucket but I'm going to ignore that step and upload my own thumbs manaually later.
 
 ![Transcode 2](http://spreadtruth.com/test/videojs-dash/ss-transcode-2.png "Transcode 2")
 ![Transcode 3](http://spreadtruth.com/test/videojs-dash/ss-transcode-3.png "Transcode 3")
@@ -36,3 +36,5 @@ Now we need to specify how many different video quality segments we want for our
 Once we have all our presets we need to add them to a playlist which will be the manifest file (.mpd) which we are going to name `index`. This file is what we feed our video player in the javascript later.
 ![Transcode 4](http://spreadtruth.com/test/videojs-dash/ss-transcode-4.png "Transcode 4")
 
+Now run your job. Once it's complete you should see the output of your dash files and index.mpd file in your -out S3 bucket.
+
diff --git a/gistfile1.md b/gistfile1.md
@@ -32,3 +32,7 @@ Now we need to specify how many different video quality segments we want for our
 ![Transcode 2](http://spreadtruth.com/test/videojs-dash/ss-transcode-2.png "Transcode 2")
 ![Transcode 3](http://spreadtruth.com/test/videojs-dash/ss-transcode-3.png "Transcode 3")
 
+
+Once we have all our presets we need to add them to a playlist which will be the manifest file (.mpd) which we are going to name `index`. This file is what we feed our video player in the javascript later.
+![Transcode 4](http://spreadtruth.com/test/videojs-dash/ss-transcode-4.png "Transcode 4")
+
diff --git a/gistfile1.md b/gistfile1.md
@@ -21,11 +21,14 @@ Here we first need to create a new pipeline. Think of a the pipeline as a queue
 
 ![Pipeline](http://spreadtruth.com/test/videojs-dash/ss-pipeline.png "Pipeline")
 
+
 Now that we have a pipeline let's create a Job that will transcode our video for MPEG-DASH. If we created our outpute folders and uploaded our video correctly we should see them as options when we select the empty fields here. So start your job as so:
 
 ![Transcode 1](http://spreadtruth.com/test/videojs-dash/ss-transcode-1.png "Transcode 1")
 
-Now we need to specify how many different video quality segments we want for our streaming. This is where we define the bitrate magic that allows our video to stream different qualities based on a user's connectivity.
+
+Now we need to specify how many different video quality segments we want for our streaming. This is where we define the bitrate magic that allows our video to stream different qualities based on a user's connectivity. First select the DASH preset for the highest quality. A good segment duration is 10 seconds. For the output key I like to use the naming convention you see in the screenshot. Repeat the process for the different DASH quality presets as well as for the audio preset.
 
 ![Transcode 2](http://spreadtruth.com/test/videojs-dash/ss-transcode-2.png "Transcode 2")
+![Transcode 3](http://spreadtruth.com/test/videojs-dash/ss-transcode-3.png "Transcode 3")