{"id":11093,"date":"2017-09-10T02:09:07","date_gmt":"2017-09-10T02:09:07","guid":{"rendered":"https:\/\/expressplay.local\/?page_id=11093"},"modified":"2021-02-10T12:34:08","modified_gmt":"2021-02-10T20:34:08","slug":"tutorial-hls-packager","status":"publish","type":"page","link":"https:\/\/www.expressplay.com\/ko\/developer\/tutorial-hls-packager\/","title":{"rendered":"Tutorial: HLS Packaging"},"content":{"rendered":"<style type=\"text\/css\">\n    hr, img {\n        margin: 20px 0;\n    }<\/p>\n<p>    code {\n        word-break: break-all;\n        white-space: pre-wrap;\n        font-size: 14px;\n        color: #555;\n        margin: 20px 0;\n    }\n<\/style>\n<div class=\"flex flex-wrap -mx-6\">\n<div class=\"w-full lg:w-7\/12 px-6\">\n<h2>HLS Packaging<\/h2>\n<h4 style=\"font-size:18px; font-weight: 400;\">This Tutorial guides you through the steps involved in packaging HLS content to use with ExpressPlay. This tutorial guides you through the process using Encoding.com and S3.<\/h4>\n<div class=\"bg-grey-100 p-8 mt-12 mb-12\">\n<h4 style=\"margin-bottom: 10px; font-weight: 400; font-size: 20px;\">Requirements<\/h4>\n<ul class=\"tutorial_container\">\n<li>The Apple HLS Tools (<a href=\"https:\/\/developer.apple.com\/streaming\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Apple Developer Site<\/a>)<\/li>\n<li>An Encoding.com account (<a href=\"http:\/\/www.encoding.com\/pricing\/monthlyPlans\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Free Trial<\/a>)<\/li>\n<li>A storage solution (S3, CF, Azure, Aspera or FTP Server)<\/li>\n<li>HD MP4 Content<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"w-full lg:w-5\/12 px-6\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/08\/developer-packager.png\" alt=\"\"\/>\n<\/div>\n<\/div>\n<hr \/>\n<p>The Apple HLS Tools are compatible with OS X and allow users to encrypt both MPEG and MP4 media types. This tutorial focuses on packaging HLS content on OS X for use with ExpressPlay. To that end, this tutorial assumes you have unencrypted high quality MP4 content ready for transcoding.<\/p>\n<p>For the purposes of this tutorial we are using Big Buck Bunny as the source material. 1920&#215;1080 is recommended to provide as many different bit rates as possible though there are several resolutions available at the link below.<\/p>\n<p><a target=\"_blank\" href=\"http:\/\/www.bigbuckbunny.org\/download\/\" rel=\"noopener noreferrer nofollow\">http:\/\/www.bigbuckbunny.org\/download\/<\/a><\/p>\n<p>\u00a0<\/p>\n<hr \/>\n<div class=\"tutorial_step clearfix\">\n<p>STEP 1 &#8211; Using Encoding.com to make Encrypted HLS Content<\/p>\n<\/div>\n<p>\u00a0<\/p>\n<p><a target=\"_blank\" href=\"http:\/\/www.encoding.com\/\" rel=\"noopener noreferrer nofollow\">Encoding.com<\/a> provides a free usage tier that makes it ideal for this tutorial. Establish or login to your account <a target=\"_blank\" href=\"https:\/\/www.encoding.com\/login\" rel=\"noopener noreferrer nofollow\">here<\/a> Encoding.com accepts file uploads from a browser as well as other methods. In this case, upload your video directly. For this tutorial we will be use an HD version of the Big Buck Bunny trailer, if you also wish to use the HD version, you can download it <a target=\"_blank\" href=\"http:\/\/www.bigbuckbunny.org\/trailer-page\/\" rel=\"noopener noreferrer nofollow\">here<\/a>.<\/p>\n<p>NOTE: while this tutorial uses Encoding.com for simplicity other tools are equally suitable.  Please consult <a target=\"_blank\" href=\"\/ko\/developer\/packaging\/\" rel=\"noopener noreferrer\">http:\/\/www.expressplay.com\/developer\/packaging<\/a> for further references. The m3u8 updates discussed in the sections below however remain the same.<\/p>\n<p>With your content uploaded, you need to select an output type. Select Adaptive Streaming Formats from the drop down menu on the right. Then Apple HLS iPhone or iPad from the second pull-down menu (this tutorial uses iPhone). Next select your destination; this is the location to which the file will be uploaded when the file is finished being encoded. This tutorial uses S3 for the file destination.<\/p>\n<p>      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/08\/hls1.png\" alt=\"\" style=\"margin: 20px 0; border: 1px solid #E6E6E6;\"\/><\/p>\n<p>After filling out your destination credentials, in this case your AWS Key, Secret Key, and Bucket, click the Customize button on the lower right.<\/p>\n<p>The window will expand out and reveal several options. For use with ExpressPlay, the HLS content must be encrypted. Select Adaptive Settings, and the window will display AES encryption options. Set the AES option to Yes and provide an Encryption Key. Be sure to save the key, it will be required later in the process.<\/p>\n<p>      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/08\/hls2.png\" alt=\"\" style=\"margin: 20px 0; border: 1px solid #E6E6E6;\"\/><\/p>\n<p>For the purposes of this tutorial we have used an easy to remember, though insecure key; <em>\u201c43214321432143214321432143214321\u201d<\/em>.<\/p>\n<p>With encryption enabled, click the Save button and then select Process Video. This action starts the process of transcoding and encrypting your video. When this process is complete, you get a nearly complete HLS adaptive file set in the form of a Tarball delivered to your output destination.<\/p>\n<p>Download and open the Tarball. Inside you will find multiple .m3u8 playlist files and multiple .ts video files.<\/p>\n<p>      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/08\/hls3.png\" alt=\"\" style=\"margin: 20px 0; border: 1px solid #E6E6E6;\"\/><\/p>\n<p><span style=\"font-size:15px\">Each .m3u8 file is a playlist file containing instructions on decryption and duration for the player. Each .ts file is a chunk of playable media in the specified bi trate. In the example above, there are files for 110, 200, 400 and 600 kilobits\/second.<\/span><\/p>\n<hr \/>\n<div class=\"tutorial_step clearfix\">\n<p>STEP 2 &#8211; Configuring the Playlist Files<\/p>\n<\/div>\n<p>ExpressPlay requires that each media item have two identifiers: the Content Key and Content ID. The Content Key is the encryption key that was used above, and the Content ID, or CID, is a string associated with each piece of content.<\/p>\n<p>The .ts files are fine as they are, however the playlist files must be configured for use with ExpressPlay. Open the .m3u8 file ending in -110k.m3u8 in your favorite text editor. Find the Target Duration, Key Method, URI and a directory of the associated .ts files.<\/p>\n<p>      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/08\/hls4.png\" alt=\"\"\/><\/p>\n<p>In this example, notice the TargetDuration is 10. Each file has a duration, this is listed as the EXTINF value in the line preceding the file name. The Encoding.com output files do not meet the HLS spec completely. In this case, the Target Duration value is actually lower then the longest duration in the file set in some situations. Each .m3u8 file must have its Target Duration value set to match the longest duration listed in the file.<\/p>\n<p>Each .m3u8 file must also have its Key URI values changed. Instead of referencing the file name, change the value to \u201c<em>urn:marlin-drm<\/em>\u201d, add a comma after the quotes, and append \u201c<em>CID=\u201d&lt;value&gt;\u201d<\/em>\u201d. The \u2018&lt;value&gt;\u2019 used in the CID is a unique string used by Marlin. In this case, the &lt;value&gt; is <em>BigBuckBunny<\/em><\/p>\n<p>      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/08\/hls5.png\" alt=\"\"\/><\/p>\n<p><span style=\"font-size:15px\">These configuration changes must be repeated for the playlist for each bit rate. The CID must remain identical throughout all playlists, and the TargetDuration must be updated to match the longest duration file in each playlist.<\/span><\/p>\n<div class=\"tutorial_step clearfix\">\n<div><span><\/span>STEP 3<\/div>\n<p>Configuring the Master Playlist<\/p>\n<\/p><\/div>\n<p><span style=\"font-size:15px\">HLS uses distributed playlists. There is one playlist for each bit rate, and one master playlist that directs the player to the requested bit rate playlist.<\/span><\/p>\n<p>      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/08\/hls6.png\" alt=\"\"\/><\/p>\n<p><span style=\"font-size:15px\">This master playlist must be configured similarly to the bit rate playlists. To configure this playlist, simply add the <\/span><em>Key:Method<\/em><span style=\"font-size:15px\"> line used in the previous playlists to the master playlist. Place the line between the #EXTM3U line and the first <\/span><em>#EXT-X-STREAM-INF:<\/em><span style=\"font-size:15px\"> line.<\/span><\/p>\n<p>      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/08\/hls7.png\" alt=\"\"\/><\/p>\n<p><span style=\"font-size:15px\">Because there is no 50k content available, it needs to be removed from the master playlist. To do this, remove lines eleven and twelve. This way the player will begin looking for content in the 110k stream rather then the 50k stream.<\/span><\/p>\n<p>      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/08\/hls8.png\" alt=\"\"\/><\/p>\n<p>With the master playlist configured, this batch of HLS content is now ready to be hosted and played.<\/p>\n<p><strong>Note:<\/strong> Encoding.com returns HLS content with the mime type \u201cx-mpegURL\u201d which is not supported by ExpressPlay. To ensure playback on all devices, be sure to edit the content type metadata in S3 to <em>vnd.apple.mpegURL<\/em> which is supported by ExpressPlay.<\/p>","protected":false},"excerpt":{"rendered":"<p>HLS Packaging This Tutorial guides you through the steps involved in packaging HLS content to use with ExpressPlay. This tutorial guides you through the process using Encoding.com and S3. Requirements The Apple HLS Tools (Apple Developer Site) An Encoding.com account (Free Trial) A storage solution (S3, CF, Azure, Aspera or FTP Server) HD MP4 Content [&hellip;]<\/p>\n","protected":false},"author":124,"featured_media":0,"parent":10924,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-expressplay-developer.php","meta":{"_acf_changed":false,"footnotes":""},"tax_page_type":[512],"coauthors":[621],"class_list":["post-11093","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/pages\/11093","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/users\/124"}],"replies":[{"embeddable":true,"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/comments?post=11093"}],"version-history":[{"count":0,"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/pages\/11093\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/pages\/10924"}],"wp:attachment":[{"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/media?parent=11093"}],"wp:term":[{"taxonomy":"tax_page_type","embeddable":true,"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/tax_page_type?post=11093"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.expressplay.com\/ko\/wp-json\/wp\/v2\/coauthors?post=11093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}