{"id":11105,"date":"2017-09-10T02:17:07","date_gmt":"2017-09-10T02:17:07","guid":{"rendered":"https:\/\/expressplay.local\/?page_id=11105"},"modified":"2021-10-19T06:44:46","modified_gmt":"2021-10-19T13:44:46","slug":"tutorial-zencoder","status":"publish","type":"page","link":"https:\/\/www.expressplay.com\/ja\/developer\/tutorial-zencoder\/","title":{"rendered":"Zencoder with ExpressPlay"},"content":{"rendered":"<style type=\"text\/css\">\n    hr, img {<br \/>\n        margin: 20px 0;<br \/>\n    }<\/p>\n<p>    code {<br \/>\n        word-break: break-all;<br \/>\n        white-space: pre-wrap;<br \/>\n        font-size: 14px;<br \/>\n        color: #555;<br \/>\n        margin: 20px 0;<br \/>\n    }<br \/>\n<\/style>\n<div class=\"flex flex-wrap -mx-6\">\n<div class=\"w-full lg:w-7\/12 px-6\">\n<h2>Zencoder with ExpressPlay Tutorial<\/h2>\n<h4 style=\"font-size: 18px; font-weight: 400;\">This tutorial guides you through the process of encoding content in an S3 bucket using Zencoder, then streaming that content using ExpressPlayer.<\/h4>\n<div class=\"bg-grey-100 p-6 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>An S3 Bucket<\/li>\n<li>Good quality MP4 or MOV video<\/li>\n<li>An <a href=\"https:\/\/itunes.apple.com\/us\/app\/expressplayer\/id658596028?mt=8&amp;uo=4\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">iOS<\/a> or <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.intertrust.ExpressPlayer\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Android<\/a> device<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"w-full lg:w-5\/12 px-6\"><img decoding=\"async\" src=\"https:\/\/www.expressplay.com\/wp-content\/uploads\/2017\/09\/developer-packaging-large.png\" alt=\"\" \/><\/div>\n<\/div>\n<hr \/>\n<div class=\"tutorial_step clearfix\">\n<p>STEP 1 &#8211; Create and Set Permission for S3 Bucket<\/p>\n<\/div>\n<p>Create an S3 bucket &#8211; or use a previously created one.<\/p>\n<p>Once you have set up the S3 bucket, set permissions for read and write by Zencoder. To do so, follow the instructions at <a href=\"https:\/\/app.zencoder.com\/docs\/guides\/getting-started\/working-with-s3\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Zencoder Guides &#8211; Get Started Working with S3<\/a>, and the pictures below.<\/p>\n<p>To change permissions to your S3 bucket, click the Properties button on the right hand side of the page after clicking into your bucket. Your screen should look similar to the picture below.<\/p>\n<p><img decoding=\"async\" style=\"border: 1px solid #e7e7e7; margin: 20px 0;\" src=\"\/wp-content\/uploads\/2017\/08\/zen1.png\" alt=\"\" \/><\/p>\n<p>Click on the <tt> Add Bucket Policy<\/tt> link shown in the picture below under the <tt> Permissions<\/tt> dropdown.<\/p>\n<p><img decoding=\"async\" style=\"border: 1px solid #e7e7e7; margin: 20px 0;\" src=\"\/wp-content\/uploads\/2017\/08\/zen2.png\" alt=\"\" \/><\/p>\n<p><span style=\"font-size: 15px;\">You will then be presented with the following screen.<\/span><\/p>\n<p><img decoding=\"async\" style=\"border: 1px solid #e7e7e7; margin: 20px 0;\" src=\"\/wp-content\/uploads\/2017\/08\/zen3.png\" alt=\"\" \/><\/p>\n<p><span style=\"font-size: 15px;\">Following the instructions in the Zencoder Guide mentioned above, enter the bucket policy to allow Zencoder read and write access to your S3 bucket. You have now completed the first step to encoding with Zencoder.<\/span><\/p>\n<hr \/>\n<div class=\"tutorial_step clearfix\">\n<p>STEP 2 &#8211; Upload Content to the S3 Bucket<\/p>\n<\/div>\n<p><span style=\"font-size: 15px;\">Create a new test folder for the purpose of this tutorial.<\/span><\/p>\n<p><img decoding=\"async\" style=\"border: 1px solid #e7e7e7; margin: 20px 0;\" src=\"\/wp-content\/uploads\/2017\/08\/zen4.png\" alt=\"\" \/><\/p>\n<p>Click into the folder you created, and click the Upload button at the top of the page. The following screen will appear. For this example we will be using .mov files, so drag and drop the contents that you would like to upload to your S3 bucket as directed<\/p>\n<p><img decoding=\"async\" style=\"border: 1px solid #e7e7e7; margin: 20px 0;\" src=\"\/wp-content\/uploads\/2017\/08\/zen5.png\" alt=\"\" \/><\/p>\n<p><span style=\"font-size: 15px;\">Once you have finished your upload, you will get the following screen as proof of transfer.<\/span><\/p>\n<p><img decoding=\"async\" style=\"border: 1px solid #e7e7e7; margin: 20px 0;\" src=\"\/wp-content\/uploads\/2017\/08\/zen6.png\" alt=\"\" \/><\/p>\n<hr \/>\n<div class=\"tutorial_step clearfix\">\n<p>STEP 3 &#8211; Generate Content ID and Key for Asset<\/p>\n<\/div>\n<p>ExpressPlay requires that each media have two identifiers: a Content ID and an Encryption Key.<br \/>\nThe following are an example of such keys.<\/p>\n<p>content ID = 3c26e840d9958554bf69df7a1491828c<br \/>\nkey = 1234567890abcdef1234567890abcdef<\/p>\n<p>To create this key use a random number generator, or create one yourself. The content id and encryption key are necessary in the following steps, so keep them handy.<\/p>\n<p><strong>Note:<\/strong> The DRM key and id must be specified as 32 hexadecimal characters (with optional dashes), such as &#8216;1234567890abcdef1234567890abcdef&#8217; or &#8216;12345678-90ab-cdef-1234-567890abcdef&#8217;<\/p>\n<hr \/>\n<div class=\"tutorial_step clearfix\">\n<div>STEP 4<\/div>\n<p>Create and Start the Zencoder Job<\/p>\n<\/div>\n<p>Before you create the Zencoder job, go to your Zencoder account and make sure that under credentials you have added your S3 bucket to the list.<\/p>\n<p>Now, copy and paste the following into a file. Replace YOUR_BUCKET_NAME, YOUR_FOLDER_NAME, YOUR_KEY_ID, YOUR_CONTENT_KEY, with the appropriate strings.<\/p>\n<div class=\"bg-grey-100 p-8 mt-12 mb-12\"><code>{<br \/>\n\"input\": \"s3:\/\/YOUR_BUCKET_NAME\/YOUR_FOLDER_NAME\/big_buck_bunny_720p_h264.mov\",<br \/>\n\"outputs\": [<br \/>\n{<br \/>\n\"public\": true,<br \/>\n\"label\": \"dash-1200\",<br \/>\n\"streaming_delivery_format\": \"dash\",<br \/>\n\"video_bitrate\": 1200,<br \/>\n\"type\": \"segmented\",<br \/>\n\"url\": \"s3:\/\/YOUR_BUCKET_NAME\/YOUR_FOLDER_NAME\/output\/bbb\/1200k\/rendition.mpd\",<br \/>\n\"drm\": {<br \/>\n\"method\": \"cenc\",<br \/>\n\"key_id\": \"YOUR_KEY_ID\",<br \/>\n\"content_key\": \"YOUR_CONTENT_KEY\"<br \/>\n}<br \/>\n},<br \/>\n{<br \/>\n\"public\": true,<br \/>\n\"label\": \"dash-1800\",<br \/>\n\"streaming_delivery_format\": \"dash\",<br \/>\n\"video_bitrate\": 1800,<br \/>\n\"type\": \"segmented\",<br \/>\n\"url\": \"s3:\/\/YOUR_BUCKET_NAME\/YOUR_FOLDER_NAME\/output\/bbb\/1800k\/rendition.mpd\",<br \/>\n\"drm\": {<br \/>\n\"method\": \"cenc\",<br \/>\n\"key_id\": \"YOUR_KEY_ID\",<br \/>\n\"content_key\": \"YOUR_CONTENT_KEY\"<br \/>\n}<br \/>\n},<br \/>\n{<br \/>\n\"public\": true,<br \/>\n\"streaming_delivery_format\": \"dash\",<br \/>\n\"type\": \"playlist\",<br \/>\n\"url\": \"s3:\/\/YOUR_BUCKET_NAME\/YOUR_FOLDER_NAME\/output\/bbb\/manifest.mpd\",<br \/>\n\"streams\": [<br \/>\n{<br \/>\n\"source\": \"dash-1200\",<br \/>\n\"path\": \"1200k\"<br \/>\n},<br \/>\n{<br \/>\n\"source\": \"dash-1800\",<br \/>\n\"path\": \"1800k\"<br \/>\n}<br \/>\n],<br \/>\n\"drm\": {<br \/>\n\"method\": \"cenc\",<br \/>\n\"key_id\": YOUR_KEY_ID,<br \/>\n\"content_key\": YOUR_CONTENT_KEY,<br \/>\n\"schemas\": [<br \/>\n{<br \/>\n\"type\": \"marlin\"<br \/>\n}<br \/>\n]<br \/>\n}<br \/>\n}<br \/>\n]<br \/>\n}<\/code><\/div>\n<p><span style=\"font-size: 15px;\">In this example cURL will be used to execute commands, however, other options are available. Copy and paste the following into your terminal.<\/span><\/p>\n<div class=\"bg-grey-100 p-8 mt-12 mb-12\"><code>curl --header \"Zencoder-Api-Key: YOUR_API_KEY\" --data @FILE_NAME<br \/>\nhttps:\/\/app.zencoder.com\/api\/v2\/jobs | python -m json.tool<\/code><\/div>\n<p>Replace YOUR_API_KEY with the All Access Key under the API tab at the Zencoder site. Replace FILE_NAME with the name of the file you copied the created job into.<\/p>\n<p><strong>Note:<\/strong> This call will most likely give you an error saying that your account does not have the drm feature. Just follow the instructions and email help@zencoder.com.<\/p>\n<p>The following is an example of the output you will receive upon starting the job.<\/p>\n<p><img decoding=\"async\" style=\"border: 1px solid #e7e7e7; margin: 20px 0;\" src=\"\/wp-content\/uploads\/2017\/08\/zen7.png\" alt=\"\" \/><\/p>\n<p><span style=\"font-size: 15px;\">To check on the status of the call, enter the following into your terminal.<\/span><\/p>\n<div class=\"bg-grey-100 p-8 mt-12 mb-12\"><code>curl https:\/\/app.zencoder.com\/api\/v2\/outputs\/ITEM_ID\/progress.json?api_key=YOUR_API_KEY | python -m json.tool<\/code><\/div>\n<p>id field you see in the response to the first call.<\/p>\n<p>The following image is an example of the response you will receive. As you can see, you will see information about the file, as well as the state of the file.<br \/>\nThis will eventually tell you if the call has succeeded or failed, giving you an error message for the latter<\/p>\n<p><img decoding=\"async\" style=\"border: 1px solid #e7e7e7; margin: 20px 0;\" src=\"\/wp-content\/uploads\/2017\/08\/zen8.png\" alt=\"\" \/><\/p>\n<hr \/>\n<div class=\"tutorial_step clearfix\">\n<p>STEP 5 &#8211; Get URL for Master Manifest<\/p>\n<\/div>\n<p><span style=\"font-size: 15px;\">When the job successfully finishes, you can find the URL for the <\/span>manifest.mpd<span style=\"font-size: 15px;\"> file. This URL is found in the original output from the first call made to start the job. The image below highlights the URL to get.<\/span><\/p>\n<p><img decoding=\"async\" style=\"border: 1px solid #e7e7e7; margin: 20px 0;\" src=\"\/wp-content\/uploads\/2017\/08\/zen9.png\" alt=\"\" \/><\/p>\n<p>Do a cURL call to that URL to pull down the manifest.mpd file. Information from it will be used in the next step.<\/p>\n<p><strong>Note:<\/strong> If you did not include &#8220;public&#8221;: true for all output files in your Zencoder job, this call may not work. Re-create the Zencoder job and start over.<\/p>\n<hr \/>\n<div class=\"tutorial_step clearfix\">\n<p>STEP 6 &#8211; Get MS3 Token<\/p>\n<\/div>\n<p>In the <tt> manifest.mpd<\/tt> file you pulled down you will find a contentId. You will need this to get the MS3 token. The image below shows you how the contentId looks.<\/p>\n<p><img decoding=\"async\" style=\"border: 1px solid #e7e7e7; margin: 20px 0;\" src=\"\/wp-content\/uploads\/2017\/08\/zen10.png\" alt=\"\" \/><\/p>\n<p style=\"word-wrap: break-word;\"><strong>Note:<\/strong> The format of the contentId is urn:marlin:kid:ZENCODER_CONTENT_KEY<\/p>\n<p style=\"word-wrap: break-word;\">Copy and paste the following call into your terminal. Replace YOUR_EXPRESSPLAY_TEST_CUSTOMER_AUTHENTICATOR with the test customer authenticator for your account. Replace YOUR_MANIFEST_CONTENT_ID with the marlin kid you found in the manifest.mpd. Replace YOUR_CONTENT_KEY with the key you created for Zencoder. Replace YOUR_CONTENT_URL with the URL to your manifest.mpd file.<\/p>\n<div class=\"bg-grey-100 p-8 mt-12 mb-12\"><code>curl 'https:\/\/ms3-gen.test.expressplay.com\/hms\/ms3\/token?customerAuthenticator=YOUR_EXPRESSPLAY_TEST_CUSTOMER_AUTHENTICATOR&amp;contentId=YOUR_MANIFEST_CONTENT_ID&amp;contentKey=YOUR_CONTENT_KEY&amp;contentURL=YOUR_CONTENT_URL'<\/code><\/div>\n<p>You will get a response back that is similar to the one below.<\/p>\n<div class=\"bg-grey-100 p-8 mt-12 mb-12\"><code><i>https:\/\/ms3.eval.hostedmarlin.com:8443\/hms\/ms3\/rights\/?b=ABIAAwAAB60ACHByYWN0aWNlAfAAEAY62zyWVF4uZQxQqtE-Ds4AcGAWLuFR7f0Qzo3osjK7s_sgugSvZyzVRV7CqfxesvqumKY8feViY5U8ZR1AIZX8oyGuaNKeZ4XE5njEwyO4fgOLUQZTzeBser1MaIFZQBtsOv6VT_DHuqlkS01fUJpneO4nLZLUx7GWSXriAo4kz34AAAAU7eDg7OAh93l8h7cfizx7sMWdZrc#http%3A%2F%2Fbucketlanaintertrust.s3.amazonaws.com%2FZencoder-test%2Foutput%2Fbbb%2Fmanifest.mpd<\/i><br \/>\n<\/code><\/div>\n<hr \/>\n<div class=\"tutorial_step clearfix\">\n<p>STEP 7 &#8211; Play the Response in your ExpressPlay player (App Store, SDK build, etc)<\/p>\n<\/div>\n<p>Take the response URL you received from the above step and use it in the ExpressPlayer app. You can find this app in the PlayStore on Android devices and in the App Store on iOS devices. For <em>Select a content format<\/em> choose DASH. And for <em>Select a token format <\/em>choose Marlin MS3. Click the Play button and your video should play.<\/p>\n<p><strong>Note:<\/strong> The response URL can also be used in the Example application for MS3 tokens. Just replace the ms3_url string with the response. And make sure that the type is set to MediaSourceType.DASH.<\/p>\n<p style=\"word-wrap: break-word;\"><strong>Note:<\/strong> To abide by the Content Provider\u2019s robustness rules, the ExpressPlay SDK limits the resolution of the content that can be displayed to 520K. On MacOS\/Windows it will attempt to downscale, on iOS\/Android it will refuse to playback content with higher resolution. Adding the following request parameters to the ExpressPlay Service MS3 license request: &#8220;&amp;extensionType=wudo&amp;extensionCriticalFlag=false&amp;extensionPayload=AAAAAA==&#8221; will solve the problem.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Zencoder with ExpressPlay Tutorial This tutorial guides you through the process of encoding content in an S3 bucket using Zencoder, then streaming that content using ExpressPlayer. Requirements An S3 Bucket Good quality MP4 or MOV video An iOS or Android device STEP 1 &#8211; Create and Set Permission for S3 Bucket Create an S3 bucket &#8211; or use a previously created one. Once you have set up the S3 bucket, set permissions for read and write by Zencoder. To do so, follow the instructions at Zencoder Guides &#8211; Get Started Working with S3, and the pictures below. To change permissions to your S3 bucket, click the Properties button on the [&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-11105","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.expressplay.com\/ja\/wp-json\/wp\/v2\/pages\/11105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.expressplay.com\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.expressplay.com\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.expressplay.com\/ja\/wp-json\/wp\/v2\/users\/124"}],"replies":[{"embeddable":true,"href":"https:\/\/www.expressplay.com\/ja\/wp-json\/wp\/v2\/comments?post=11105"}],"version-history":[{"count":0,"href":"https:\/\/www.expressplay.com\/ja\/wp-json\/wp\/v2\/pages\/11105\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.expressplay.com\/ja\/wp-json\/wp\/v2\/pages\/10924"}],"wp:attachment":[{"href":"https:\/\/www.expressplay.com\/ja\/wp-json\/wp\/v2\/media?parent=11105"}],"wp:term":[{"taxonomy":"tax_page_type","embeddable":true,"href":"https:\/\/www.expressplay.com\/ja\/wp-json\/wp\/v2\/tax_page_type?post=11105"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.expressplay.com\/ja\/wp-json\/wp\/v2\/coauthors?post=11105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}