<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ videos - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ Browse thousands of programming tutorials written by experts. Learn Web Development, Data Science, DevOps, Security, and get developer career advice. ]]>
        </description>
        <link>https://www.freecodecamp.org/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ videos - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Sun, 17 May 2026 04:38:33 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/news/tag/videos/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ Why Developers Should Have a YouTube Channel ]]>
                </title>
                <description>
                    <![CDATA[ By Nishant Kumar If you're a software developer, chances are you'll be learning constantly. There is a famous quote that says, “Forget about the kids, fathers are still learning”. This couldn't be more true in the case of coding. You constantly nee... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/why-developers-should-have-a-youtube-channel/</link>
                <guid isPermaLink="false">66d4607a230dff016690583b</guid>
                
                    <category>
                        <![CDATA[ software development ]]>
                    </category>
                
                    <category>
                        <![CDATA[ teaching ]]>
                    </category>
                
                    <category>
                        <![CDATA[ videos ]]>
                    </category>
                
                    <category>
                        <![CDATA[ youtube ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Tue, 20 Sep 2022 16:14:20 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2022/09/Why-developers-should-have-a--1-.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Nishant Kumar</p>
<p>If you're a software developer, chances are you'll be learning constantly. There is a famous quote that says,</p>
<blockquote>
<p><em>“Forget about the kids, fathers are still learning”.</em></p>
</blockquote>
<p>This couldn't be more true in the case of coding. You constantly need to learn, develop, and upgrade your skills. And what is a better way to do that other than starting your own YouTube channel and making videos related to the Computer Programming field?</p>
<p>In this article, I'll explain all the benefits of having a software-related YouTube channel.</p>
<h2 id="heading-it-helps-you-learn-things-more-efficiently">It Helps You Learn Things More Efficiently</h2>
<p>The first point on our list is that creating videos (like writing tutorials) can help you learn things quicker and more efficiently.</p>
<p>Let’s take an example of some topic, like <strong>Recursion</strong>. You can read about it in a book, or in a tutorial on the internet. That’s simple, but you might forget what you learned later.</p>
<p>But when you make a video on that topic, you are teaching it. And to teach certain topics, you'll need to research them quite a bit.</p>
<p>If you are about to teach <strong>Recursion</strong> to a bunch of people, you will watch videos and learn about it in depth. This helps you make sure that you don't leave anything out about that topic. </p>
<p>Then you will create some code examples so people can code along with you at home, and add an explanation about what’s happening in the code in your own voice.</p>
<p>This will boost your learning curve by 200%, or even more. After all, you know what they say – to really know something, try teaching it.</p>
<h2 id="heading-it-can-help-you-get-a-well-paying-developer-job">It Can Help You Get a Well-Paying Developer Job</h2>
<p>Now, let’s say you are searching for a <strong>React</strong> or <strong>Angular</strong> job. You've applied for them through job posting sites. The recruiter contacted you saying they want to move forward with your application, and scheduled an interview tomorrow.</p>
<p>The interview starts. The interviewer asked you to give your introduction. You say I am Nishant, from XYZ Place, looking for an ABC job, and all the other things. The recruiter is looking at your résumé and your portfolio while you are introducing yourself. They see that you have a Youtube Channel, so they ask you about it.</p>
<p>You then tell them about your channel and the sorts of topics you teach there. You explain that you make the tutorial videos, and do all the other things that you do. This will likely impress the recruiter. So what do you think they will do next?</p>
<p>Well, they'll likely email you informing you that they're going to transfer you to the next round of the interview. Who do you think will be happy now after seeing his email? You will!</p>
<p>But the catch is, your videos should be related to pure software development. Focus on topics around coding, programming languages, tools and frameworks. This will broaden your own knowledge and show that you can work efficiently with these tools.</p>
<h2 id="heading-it-can-help-grow-your-network-and-online-presence">It Can Help Grow Your Network and Online Presence</h2>
<p>Making videos also enables you to build and grow your network. You can have a <strong>LinkedIn</strong> account where you can share posts about the topics you've covered in your videos, or playlists in some language like JavaScript or tool like React. </p>
<p>Sooner or later people will start to notice this and they will start following you. You will connect with recruiters from big companies, and that can help you one day. </p>
<p>You will also see other people on Youtube doing the same, and you will follow them. You will see what those other people are doing and it will be an inspiration for you. </p>
<p>The same is true on <strong>Twitter</strong> as well. Let's say you contribute videos on <strong>freeCodeCamp's</strong> channel. They publish it on their website as a transcript, and share it on social media channels like Twitter and Linkedin. People following freeCodeCamp will notice this and that too can help grow your network. People will share it, like it, retweet it, and so on.</p>
<h2 id="heading-it-helps-improve-your-soft-skills-like-communication-and-confidence">It Helps Improve Your Soft Skills like Communication and Confidence</h2>
<p>So if you make videos, it can really help improve the following skills:</p>
<ol>
<li>Communication: If you are making videos, you have to speak. You have to tell the audience what's going on. And day by day, it will help you speak more clearly, eloquently, and engagingly. And communication skills are a pretty good skill to have out there.</li>
<li>Confidence: You are making videos on some topic, say Recursion in JavaScript, or Promises even. You may find it hard to explain the topic at first go – but if you keep doing it, you will improve over time. The better you get at explaining things, the more confident you will get about your teaching abilities.</li>
<li>Multi-tasking: Creating videos is not easy. You need to manage the time you put in. You will record videos on your own, then edit them on your own, and post them to Youtube. And all of these parts of the process require effort. If you are managing all this, your multi-tasking skills will improve.</li>
</ol>
<p>I have been creating videos on my channel for a year. I mainly deal with tutorial-based and conceptual topics. Make sure to check out my channel <a target="_blank" href="https://www.youtube.com/c/CybernaticoByNishant">Cybernatico</a>. It has helped me a lot in improving my confidence and communication skills.</p>
<p>And if your soft skills are good, they will also help you in other things in the world as well, like public speaking, or mentoring others, or facing any enemy.</p>
<h2 id="heading-you-can-use-your-channel-to-generate-a-side-income">You can Use Your Channel to Generate a Side Income</h2>
<p>Creating videos on Youtube can help generate some side income as well. It will take effort at first, but nothing good comes out for free. </p>
<p>You will need to get monetized first. There are two steps to get monetized on youtube – two thresholds you need to pass:</p>
<ol>
<li>You need 1000 subscribers.</li>
<li>You need 4000 watch hours. One watch hour is equal to the one real hour.</li>
</ol>
<p>That alone is not simple, and you'll need to get their first (to get monetized). It can take years or maybe more. But you'll need consistency.</p>
<p>YouTube income generation works like this: you will be paid approximately a dollar per view, if the person saw ads on your video. You will need an Adsense account that will pay you for ads in your video (after YouTube monetizes your channel). </p>
<p>The income you get at first won't be much, but eventually it will grow. All you need to do is to <strong>create quality content with consistency</strong>. </p>
<p>You can then use that side income to buy things you've always wanted, like a car, a Helicopter, or even an Airplane. :)</p>
<p>But remember, it will take effort. It won’t be easy.</p>
<h2 id="heading-it-will-bring-a-smile-to-your-face">It will bring a smile to your face</h2>
<p>So you are making videos, and suppose someone sees it. They might comment something like this,</p>
<blockquote>
<p><em>Oh my God, I just saw your video on XYZ topic. I have been struggling with this and couldn’t find any solution that helped me, but this video helped me sure. Thank you for the video. Love from America.</em></p>
</blockquote>
<p>Now, what will be your thoughts after reading this comment? I am sure you will smile and your heart will bloom.</p>
<h2 id="heading-wrapping-up">Wrapping Up</h2>
<p>And those are some reasons why you should have a software YouTube channel if you are a developer. </p>
<p>Don’t worry that your content might be repetitive. What I explained in my video or what you explained in your video can be very different. A person learning the topic may not benefit from my video, but they may benefit from yours, because of how we explain things.</p>
<p>There can be thousands of creators, but there will be millions of people who are learning. And creators can learn from each other as well.</p>
<p>So that’s it. Make sure to check out my video on the topic <a target="_blank" href="https://youtu.be/99EjPNerWLk">Content Creation for Developers — Why Developers Should Have a Youtube Channel</a></p>
<blockquote>
<p><em>Thanks for reading this blog. Happy Learning and Creating.</em></p>
</blockquote>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to Send Large Video Files – Share a Big File with Email ]]>
                </title>
                <description>
                    <![CDATA[ Sending large files through email can be quite challenging. This is because each email client has a size limit for file sharing. Gmail and Yahoo limit file size to 25MB, while outlook and iCloud limit files to 20MB. So, if you decide to send, for exa... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-send-large-video-files-share-a-big-file-with-email/</link>
                <guid isPermaLink="false">66adf1476f5e63db3fc4361e</guid>
                
                    <category>
                        <![CDATA[ dropbox ]]>
                    </category>
                
                    <category>
                        <![CDATA[ email ]]>
                    </category>
                
                    <category>
                        <![CDATA[ File sharing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Google Docs ]]>
                    </category>
                
                    <category>
                        <![CDATA[ videos ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Kolade Chris ]]>
                </dc:creator>
                <pubDate>Wed, 27 Apr 2022 19:51:49 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2022/04/technology-2125547_1280.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Sending large files through email can be quite challenging. This is because each email client has a size limit for file sharing.</p>
<p>Gmail and Yahoo limit file size to 25MB, while outlook and iCloud limit files to 20MB.</p>
<p>So, if you decide to send, for example, a video file larger than 25MB, you might get an error that the message was rejected by the server because it’s too large.</p>
<p>Some email clients won’t show an error, but instead, suggest how you should send the large video file. </p>
<p>For example, Gmail will suggest that you upload the video to Google Drive: 
<img src="https://www.freecodecamp.org/news/content/images/2022/04/ss1-7.png" alt="ss1-7" width="600" height="400" loading="lazy"></p>
<p>And Outlook will suggest that you upload the video to Microsoft OneDrive:
<img src="https://www.freecodecamp.org/news/content/images/2022/04/ss2-8.png" alt="ss2-8" width="600" height="400" loading="lazy"></p>
<p>How then do you send a large video file through email? That’s what I’m going to show you in this article.</p>
<h2 id="heading-how-to-send-large-video-files-through-email-using-google-drive">How to Send Large Video Files through Email Using Google Drive</h2>
<p>Google Drive is a cloud-based storage service provided by Google for sharing files.</p>
<p>As already shown in this article, Gmail prompts you to upload a video file larger than 25MB to Google Drive and then convert the video to an accessible link.</p>
<p>If you are using another email client like Outlook, or Yahoo, you can still send the large video using Google Drive.</p>
<p>Upload the video to your Google Drive and click the “Get link” button:
<img src="https://www.freecodecamp.org/news/content/images/2022/04/ss3-7.png" alt="ss3-7" width="600" height="400" loading="lazy"></p>
<p>Change the access from restricted to “Anyone with the link”:
<img src="https://www.freecodecamp.org/news/content/images/2022/04/ss4-5.png" alt="ss4-5" width="600" height="400" loading="lazy"></p>
<p>Click “Copy link”, and then “Done”:
<img src="https://www.freecodecamp.org/news/content/images/2022/04/ss5-5.png" alt="ss5-5" width="600" height="400" loading="lazy"></p>
<p>Click “Compose” and paste the link to your email editor. Provide every other necessary detail and click the “Send” button:
<img src="https://www.freecodecamp.org/news/content/images/2022/04/ss6-5.png" alt="ss6-5" width="600" height="400" loading="lazy"></p>
<h2 id="heading-how-to-send-large-video-files-through-email-using-dropbox">How to Send Large Video Files through Email Using Dropbox</h2>
<p>Dropbox is another cloud-based storage service that lets you back up and sync files on multiple devices. You can upload up to 50GB file size to your Dropbox account if you have one.</p>
<p>To send large video files through email by using Dropbox, upload the video to your Dropbox account and copy the link:
<img src="https://www.freecodecamp.org/news/content/images/2022/04/ss7-4.png" alt="ss7-4" width="600" height="400" loading="lazy"></p>
<p>Compose your email and paste the link in to send the large video file:
<img src="https://www.freecodecamp.org/news/content/images/2022/04/ss8-4.png" alt="ss8-4" width="600" height="400" loading="lazy"></p>
<h2 id="heading-how-to-send-large-video-files-through-email-using-video-sharing-services">How to Send Large Video Files through Email Using Video Sharing Services</h2>
<p>You can send large video files through email by using video-sharing services like YouTube and Vimeo.</p>
<p>And yes, you can upload videos to YouTube without having a YouTube channel. As long as you have a Gmail account, you have access to Google services, including YouTube. So if you have a Google account, technically you can have a YouTube channel.</p>
<p>To upload videos to YouTube, click the Create button on the top-right corner and select “Upload video”:
<img src="https://www.freecodecamp.org/news/content/images/2022/04/ss9-4.png" alt="ss9-4" width="600" height="400" loading="lazy"></p>
<p>Click on “SELECT FILES” to choose the file on your device:
<img src="https://www.freecodecamp.org/news/content/images/2022/04/ss10-4.png" alt="ss10-4" width="600" height="400" loading="lazy"></p>
<p>Give the video a name and description, copy the link, and click “Next”:
<img src="https://www.freecodecamp.org/news/content/images/2022/04/ss11-3.png" alt="ss11-3" width="600" height="400" loading="lazy"></p>
<p>Follow other prompts and choose whether you want to make the video public or private, then click “Save”:
<img src="https://www.freecodecamp.org/news/content/images/2022/04/ss12-2.png" alt="ss12-2" width="600" height="400" loading="lazy"></p>
<p>Head over to your email client composer and paste in the link so you can send the large video file:
<img src="https://www.freecodecamp.org/news/content/images/2022/04/ss13-1.png" alt="ss13-1" width="600" height="400" loading="lazy"></p>
<h2 id="heading-final-thoughts">Final Thoughts</h2>
<p>You can’t send a large video file directly through email clients, but you can take advantage of the methods discussed in this article to send large video files.</p>
<p>Another way you can send a large video file through email is to compress the video through your native compressor or third-party file compressors. As long as the file is less than 20-25MB, you can send it through email.</p>
<p>But if you compress the video and it is still not less than 20-25MB, then you should use any of the methods pointed out in this article.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to undo changes in Git ]]>
                </title>
                <description>
                    <![CDATA[ You may already know that Git is like a save point system. What you generally learn with Git initially is to learn to save your changes and commit them to a remote repository. But how do you undo a change, and go back to a previous state? That’s what... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-undo-changes-in-git-e1da7930afdb/</link>
                <guid isPermaLink="false">66c4c778744830ebca763797</guid>
                
                    <category>
                        <![CDATA[ Git ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Productivity ]]>
                    </category>
                
                    <category>
                        <![CDATA[ General Programming ]]>
                    </category>
                
                    <category>
                        <![CDATA[ tech  ]]>
                    </category>
                
                    <category>
                        <![CDATA[ videos ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Zell Liew ]]>
                </dc:creator>
                <pubDate>Fri, 07 Dec 2018 16:47:47 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/0*6JjR02sGP4FgM6zj.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>You may already know that Git is like a save point system. What you generally learn with Git initially is to learn to save your changes and commit them to a remote repository. But how do you undo a change, and go back to a previous state?</p>
<p>That’s what we’re going to cover within this article.</p>
<p>I’ve covered the contents in this article in a video if you like learning by watching instead of reading.</p>
<h3 id="heading-local-vs-remote">Local vs Remote</h3>
<p>It’s more complicated to undo something that’s already on the remote. This is why you want to keep things on your local until they’re kind of confirmed.</p>
<h3 id="heading-four-common-scenarios">Four common scenarios</h3>
<p>We’ll be covering the following four common scenarios</p>
<ol>
<li>Discarding local changes</li>
<li>Amending the previous commit</li>
<li>Rolling back to a previous commit</li>
<li>Reverting a commit that has been pushed to the remote</li>
</ol>
<p>Note: In the screen shots below, I’ve used the <a target="_blank" href="https://git-fork.com/">Fork for Mac OS</a> Git Client. You can do the same in other similar Git clients.</p>
<h4 id="heading-scenario-1-discarding-local-changes">Scenario 1: Discarding local changes</h4>
<p>The first scenario is when you’ve created some changes. They’re not committed yet. And you want to delete these changes.</p>
<p>Let’s say we want to create a new feature. We’re going to add some HTML and CSS into the project:</p>
<pre><code class="lang-html"><span class="hljs-comment">&lt;!--In index.html--&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"feature"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
<pre><code class="lang-css"><span class="hljs-comment">/* In CSS file */</span>
<span class="hljs-selector-class">.feature</span> {
  <span class="hljs-attribute">font-size</span>: <span class="hljs-number">2em</span>; 
  <span class="hljs-comment">/* Other styles */</span>
}
</code></pre>
<p>To discard these changes:</p>
<ol>
<li>Go to the staging area</li>
<li>Select the files where you want to discard changes</li>
<li>Right click on the files</li>
<li>Select discard changes</li>
</ol>
<p><img src="https://cdn-media-1.freecodecamp.org/images/0*6JjR02sGP4FgM6zj.png" alt="Image" width="600" height="400" loading="lazy"></p>
<h4 id="heading-scenario-2-amending-the-previous-commit">Scenario 2: Amending the previous commit</h4>
<p>When you have created a commit and you missed out some changes and you want to add these changes in the previous commit message.</p>
<ol>
<li>Go to the staging area</li>
<li>Stage the files to commit</li>
<li>Click on the amend checkbox</li>
<li>Edit your commit message</li>
<li>Commit</li>
</ol>
<p><img src="https://cdn-media-1.freecodecamp.org/images/0*1wkCc2i9X8JWsBz4.png" alt="Image" width="600" height="400" loading="lazy"></p>
<h4 id="heading-scenario-3-rolling-back-to-a-previous-commit">Scenario 3: Rolling back to a previous commit</h4>
<p>You already have a few commits in your local repository. You decide that you don’t want these commits anymore and you want to “load” your files from a previous state.</p>
<ol>
<li>Go into the Git History</li>
<li>Right click the commit you want to roll back to</li>
<li>Select reset <code>branch</code> to here</li>
</ol>
<p><img src="https://cdn-media-1.freecodecamp.org/images/0*IwWQ9XZNRmCaVvb8.png" alt="Image" width="600" height="400" loading="lazy"></p>
<blockquote>
<p>Note: You can only reset to a commit that hasn’t been pushed into the remote.</p>
</blockquote>
<h4 id="heading-scenario-4-reverting-a-commit-that-has-been-pushed-to-the-remote">Scenario 4: Reverting a commit that has been pushed to the remote</h4>
<p>If you have a commit that has been pushed into the remote branch, you need to revert it.</p>
<blockquote>
<p>Reverting means undoing the changes by creating a new commit. If you added a line, this revert commit will remove the line. If you removed a line, this revert commit will add the line back.</p>
</blockquote>
<p>To revert, you can:</p>
<ol>
<li>Go to the Git history</li>
<li>Right click on the commit you want to revert</li>
<li>Select revert commit</li>
<li>Make sure <code>commit the changes</code> is checked.</li>
<li>Click revert</li>
</ol>
<p><img src="https://cdn-media-1.freecodecamp.org/images/0*29rgArX4rXn3aH6x.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/0*fUD5rUESrzaMnbXu.png" alt="Image" width="600" height="400" loading="lazy"></p>
<h3 id="heading-other-scenarios">Other scenarios</h3>
<p>GitHub has a useful article that shows you how to undo almost everything with Git. It will be helpful if you face other scenarios. Read it <a target="_blank" href="https://blog.github.com/2015-06-08-how-to-undo-almost-anything-with-git/">here</a>.</p>
<p>Thanks for reading. Did this article help you in any way? If it did, <a target="_blank" href="http://twitter.com/share?text=Undoing%20changes%20in%20Git%20by%20@zellwk%20?%20&amp;url=https://zellwk.com/blog/git-undo/&amp;hashtags=">I hope you consider sharing it</a>. You might help someone out. Thank you!</p>
<p>This article was originally posted at <a target="_blank" href="https://zellwk.com/blog/git-undo">my blo</a>g.<br>Sign up for my <a target="_blank" href="https://zellwk.com/">newsletter</a> if you want more articles to help you become a better frontend developer.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to create a video channel for the Amazon Alexa Show without YouTube ]]>
                </title>
                <description>
                    <![CDATA[ By Terren Peterson I’m a software engineer that has published more than twenty custom skills on the Alexa platform. I’ve been recognized as an Alexa Champion, and have won multiple hackathons using the technology. The following highlights how I built... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-create-a-video-channel-for-the-amazon-alexa-show-without-youtube-92cea2cdcb7d/</link>
                <guid isPermaLink="false">66c351185a4b1b0639bef27f</guid>
                
                    <category>
                        <![CDATA[ Alexa ]]>
                    </category>
                
                    <category>
                        <![CDATA[ General Programming ]]>
                    </category>
                
                    <category>
                        <![CDATA[ tech  ]]>
                    </category>
                
                    <category>
                        <![CDATA[ videos ]]>
                    </category>
                
                    <category>
                        <![CDATA[ youtube ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Wed, 17 Jan 2018 13:04:08 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/1*yF98uEJJ2R1z3sxd8eAZ6Q.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Terren Peterson</p>
<p>I’m a software engineer that has published more than twenty custom skills on the Alexa platform. I’ve been recognized as an <a target="_blank" href="https://developer.amazon.com/alexa/champions/terren-peterson">Alexa Champion</a>, and have won multiple hackathons using the technology. The following highlights how I built a custom video skill for the Echo Show using native Amazon technology.</p>
<h3 id="heading-the-history-of-video-consumption">The History of Video Consumption</h3>
<p>Video broadcasting has been a successful medium for more than <a target="_blank" href="https://en.wikipedia.org/wiki/History_of_television">sixty years</a>. Television sets dominated the entertainment industry for decades with broadcast signals beaming directly into living rooms. In <a target="_blank" href="https://www.ncta.com/cables-story">1990,</a> Cable Television had reached 57% of US households. This rapidly expanded the variety of content consumed by viewers.</p>
<p>Live streaming officially began in <a target="_blank" href="https://www.theguardian.com/media-network/media-network-blog/2013/mar/01/history-streaming-future-connected-tv">1995</a>, but it wasn’t until 2007 that internet-based streaming began to use the standard HTTP protocol. Smartphones like the iPhone were added soon after using similar communication methods. With the push to mobile, smaller screens started gaining more of our time. YouTube has been a huge success during this phase, and now plays <a target="_blank" href="https://www.bluleadz.com/blog/25-eye-opening-youtube-statistics-infographic">5 billion videos a day</a>.</p>
<p>In 2015, <a target="_blank" href="https://www.androidcentral.com/amazon-echo-now-available-everyone-buy-17999-shipments-start-july-14">Amazon launched</a> the first device controlled solely by a user’s voice. Voice platforms like Alexa rapidly added another device to the home, with an <a target="_blank" href="https://techcrunch.com/2017/11/08/voice-enabled-smart-speakers-to-reach-55-of-u-s-households-by-2022-says-report/">estimated 35 million</a> already being used in the US. In <a target="_blank" href="https://www.macrumors.com/2017/05/09/amazon-echo-show-june/">2017</a>, Amazon officially launched their first version of Alexa with a screen, called the Echo Show. The <a target="_blank" href="https://www.theverge.com/circuitbreaker/2017/9/11/16287812/amazon-new-fire-tv-2017-alexa">new Amazon Fire TV</a> devices also have Alexa built in, enabling streaming video to a flat screen display to be controlled by your voice.</p>
<p>The Echo Show initially included the capability to play videos from YouTube, but lately, Google and Amazon <a target="_blank" href="http://variety.com/2017/digital/news/amazon-echo-show-sales-down-youtube-1202582660/">have been fighting</a> about it’s availability. This impacted the popularity of the product given how big of a feature video playing was.</p>
<p>At the <a target="_blank" href="https://www.cnet.com/news/google-home-assistant-smart-displays-echo-show-lenovo-lg-sony-jbl-ces-2018/">2018 CES</a>, multiple consumer electronics companies announced that they were launching a Google Home compatible device with a screen. This makes the voice market even more competitive. One solution to the YouTube compatibility challenge is to host video content directly on Amazon. The following describes how to create a custom skill for the Echo Show that does just that.</p>
<h3 id="heading-how-to-create-a-custom-video-skill-on-alexa">How to Create a Custom Video Skill on Alexa</h3>
<p>Building your own video channel is surprisingly easy using Alexa and a handful of AWS services. Here is the architecture featuring a custom Alexa skill that packages content to play on an Echo Show. The AWS storage service (S3) stores the media, and streams it to the device based on instructions given by the custom skill.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/2xU4Q2AmV3qQfrKVwBMppDWKgmt1hUjJmWGz" alt="Image" width="600" height="400" loading="lazy">
<em>Component Level Architecture for Custom Video Skill</em></p>
<p>Producing content for this is comparable to that required for a YouTube channel. The current version of the Echo Show (as well as the Echo Spot) have specifications around the media type to follow. For example, the video should use an mp4 extension and a standard <a target="_blank" href="https://en.wikipedia.org/wiki/H.264/MPEG-4_AVC">H.264 compression</a> format. The resolution of the video quality should be no greater than 1280x720 in pixel size. These constraints provide a high quality video stream on the Show’s seven inch display comparable to that of a HD video player.</p>
<h3 id="heading-building-the-custom-video-skill">Building the Custom Video Skill</h3>
<p>Creating a video channel requires authoring a custom skill for Alexa and publishing it to the public skill store. There are a number of features needed for navigating the content in the channel and playing the videos. This section will cover these steps in detail. For a working example, try out the Piano Teacher skill that is already in the <a target="_blank" href="https://www.amazon.com/Piano-Teacher-video-Echo-Show/dp/B078M9843X/">Alexa store</a>. It is a skill that contains short videos with beginner lessons on how to play the piano, as well as note-by-note video instructions on how to play simple songs. <a target="_blank" href="https://github.com/terrenjpeterson/pianoplayer">Here</a> is the repo that contains all the source code needed, as well as detailed instructions to configure and deploy.</p>
<p>There are three features required to make a video channel.</p>
<p>1 — Render a background image when the skill is initially launched. This establishes the channel’s brand.<br>2 — Build navigation controls to browse and select which video to play. This includes handling touch gestures on the Echo Show screen.<br>3 — Delegate control to the device to play a video once content is selected.</p>
<h4 id="heading-1-brand-with-a-background-image">1 — Brand with a Background Image</h4>
<p>To facilitate the building of custom video skills, Alexa provides a series of templates. I use the “BodyTemplate1” template to render the background image when the skill is first invoked. When generating the metadata within the Alexa Developer Console, check the second and third boxes on the global fields screen (Video App &amp; Render Template).</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/8sZgyh5SKjVkQhGa7z0VXsUsfTy40xsVyG1T" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Setting these attributes enables additional APIs within the custom skill. Additional standard intents are required to use the APIs. These are created when building the intent model in skills kit. They are as follows:</p>
<ul>
<li>AMAZON.NavigateSettingsIntent</li>
<li>AMAZON.NextIntent</li>
<li>AMAZON.PageDownIntent</li>
<li>AMAZON.PageUpIntent</li>
<li>AMAZON.PreviousIntent</li>
<li>AMAZON.ScrollDownIntent</li>
<li>AMAZON.ScrollLeftIntent</li>
<li>AMAZON.ScrollRightIntent</li>
<li>AMAZON.ScrollUpIntent</li>
</ul>
<p>No coding in the Lambda function is required for these events, as the device will handle them natively. They just need to be included in your custom skills intent model.</p>
<p>Rendering a background image requires two utility methods that are already distributed in the standard Alexa SDK. The skill creates two identifiers to illustrate how they are used.</p>
<pre><code class="lang-js"><span class="hljs-comment">// utility methods for creating Image and TextField objects</span>

<span class="hljs-keyword">const</span> makePlainText = Alexa.utils.TextUtils.makePlainText;
<span class="hljs-keyword">const</span> makeImage     = Alexa.utils.ImageUtils.makeImage;
</code></pre>
<p>Next, I add an identifier for the location of your jpg/png file that serves as the background image. This object needs to be publicly available. The pixel size is 1024x600 based on the dimensions of the Echo Show. You don’t need to provide a separate image for the smaller Echo Spot. Alexa creates the smaller image based on the original file sized for the Show.</p>
<pre><code class="lang-js"><span class="hljs-comment">// This is a public endpoint - the easiest way is to host in S3</span>
<span class="hljs-comment">// It needs to be SSL enabled (which S3 does for you)</span>

<span class="hljs-keyword">const</span> backgroundImage = ‘https:<span class="hljs-comment">//s3.amazonaws.com/.../image.jpg';</span>
</code></pre>
<p>Next, add the following code to render the background image when the skill gets launched, along with any other audio messages.</p>
<pre><code class="lang-js">‘LaunchRequest’: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ 
  <span class="hljs-keyword">const</span> builder = <span class="hljs-keyword">new</span> Alexa.templateBuilders.BodyTemplate1Builder();
  <span class="hljs-keyword">const</span> template = builder.setTitle(‘Your Personal Instructor’)
      .setBackgroundImage(makeImage(backgroundImage))
      .setTextContent(makePlainText(‘Piano Teacher’)) 
      .build();

  <span class="hljs-comment">// check if the device has a video screen</span>
  <span class="hljs-keyword">if</span> (<span class="hljs-built_in">this</span>.event.context.System.device.supportedInterfaces.Display){      
    <span class="hljs-built_in">this</span>.response.speak(welcomeMessage)
        .listen(repeatWelcomeMessage).renderTemplate(template);
    <span class="hljs-built_in">this</span>.emit(‘:responseReady’);
  } <span class="hljs-keyword">else</span> {
    <span class="hljs-comment">// handle error of not having a video screen to play</span>
    <span class="hljs-built_in">this</span>.emit(‘:tell’, nonVideoMessage);
  } 
},
</code></pre>
<h4 id="heading-2-content-navigation">2 — Content Navigation</h4>
<p>The navigation for the content takes advantage of the flexibility of the Alexa platform. The viewer can use either their voice or fingers to navigate the content catalog, selecting exactly what they would like to view. This requires using the list template within the Alexa SDK, as well as handling events triggered from the user touching the screen.</p>
<p>Here are the different options that the user may request using either their voice or touching the screen.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1DKSPxIQBKi6Zz8ile8GVUV4YzQL26Xh1Wr1" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Rendering a list of what content is available is central to the user experience. I use ‘ListTemplate1’ from the Alexa SDK to render the list of videos. Scrolling up and down can be done through either voice or touch, and is handled by the device with no coding required.</p>
<p>The response object that is sent to list the content contains an array listing what is available on the channel. In my skill, this list is read by the Alexa voice, and is rendered visually on the screen. Here is an example of what it looks like.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/ULRD5TKnXiNO4c35VuKDNOYhHO55e8jzUzEX" alt="Image" width="600" height="400" loading="lazy">
<em>Screenshot of Piano Teacher Skill on an Alexa Show</em></p>
<p>Within the code, the content is externalized into an array object (songs.json) that contains a list of videos, as well as metadata about the location of each media file. Each item in the list has a unique token assigned. Here is a sample of the layout written in standard Javascript object notation:</p>
<pre><code class="lang-json">[ 
  { “requestName”: “Silent Night”, 
    “listSong”:<span class="hljs-literal">true</span>, 
    “token”:”song001<span class="hljs-string">", 
    “difficulty”:”Moderate”, 
    “videoObject”: “SilentNight.mp4”, 
    “audioObject”: “SilentNight.mp3” 
  }, 
  { “requestName”: “Mary Had a Little Lamb”, 
    “listSong”:true, 
    “token”:”song002"</span>, 
    “difficulty”:”Easy”, 
    “videoObject”: “MaryHadLittleLamb.mp4”, 
    “audioObject”: “MaryHadLittleLamb.mp3” 
  },
...
]
</code></pre>
<p>Here is the code that converts the array into the response needed by Alexa. Included is embedding the token for each item in the array.</p>
<pre><code class="lang-js"><span class="hljs-comment">// these are the songs that recordings have been made for</span>
<span class="hljs-keyword">var</span> songs = <span class="hljs-built_in">require</span>(<span class="hljs-string">"data/songs.json"</span>);

<span class="hljs-comment">// create List</span>
<span class="hljs-keyword">const</span> itemImage = <span class="hljs-literal">null</span>; 
<span class="hljs-keyword">const</span> listItemBuilder = <span class="hljs-keyword">new</span> Alexa.templateBuilders.ListItemBuilder(); 
<span class="hljs-keyword">const</span> listTemplateBuilder = <span class="hljs-keyword">new</span> Alexa.templateBuilders.ListTemplate1Builder();

<span class="hljs-comment">// build an array of all available songs </span>
<span class="hljs-keyword">for</span> (i = <span class="hljs-number">0</span>; i &lt; songs.length; i++ ) { 
  <span class="hljs-keyword">if</span> (songs[i].listSong) { 
    <span class="hljs-comment">// pull attributes from song array and apply to the list</span>
    listItemBuilder.addItem(<span class="hljs-literal">null</span>, songs[i].token,
      makePlainText(songs[i].requestName),
      makePlainText(songs[i].difficulty)); 
     message = message + songs[i].requestName + “, “;
  } 
} 
message = message + “Just select on the screen a song, or request by saying something “ + “like, Teach me how to play “ + songs[<span class="hljs-number">0</span>].requestName + “.”;

<span class="hljs-comment">// now create the response object using the SDK</span>
<span class="hljs-keyword">const</span> listItems = listItemBuilder.build(); 
<span class="hljs-keyword">const</span> imageLoc = pianoStrings; 
<span class="hljs-keyword">const</span> listTemplate = listTemplateBuilder.setToken(‘listToken’)
  .setTitle(‘Available Song List’) .setListItems(listItems)
  .setBackgroundImage(makeImage(imageLoc)) 
  .build(); <span class="hljs-built_in">this</span>.response.speak(message).listen(noSongRepeatMessage).renderTemplate(listTemplate); 
<span class="hljs-built_in">this</span>.emit(‘:responseReady’);
</code></pre>
<p>The Lambda function handles the ‘ElementSelected’ event invoked by the Echo Show. The request object sent by the device to the custom skill contains the token used to translate what was selected by the user.</p>
<pre><code class="lang-js"><span class="hljs-comment">// this function is invoked from the 'ElementSelected' event</span>
‘ScreenSongSelected’: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ 
  <span class="hljs-built_in">console</span>.log(“Element Selected:” + <span class="hljs-built_in">this</span>.event.request.token);
  <span class="hljs-keyword">var</span> videoName = “”;
  <span class="hljs-comment">// match token to song name and find the video object to play </span>
  <span class="hljs-keyword">for</span> (i = <span class="hljs-number">0</span>; i &lt; songs.length; i++ ) { 
    <span class="hljs-keyword">if</span> (songs[i].token === <span class="hljs-built_in">this</span>.event.request.token) { 
      <span class="hljs-built_in">console</span>.log(“Play “ + songs[i].requestName);
      videoName = songs[i].videoObject;
    } 
  } 
  <span class="hljs-keyword">const</span> videoClip = videoLoc + videoName;
  <span class="hljs-built_in">this</span>.response.playVideo(videoClip); <span class="hljs-built_in">this</span>.emit(‘:responseReady’); 
},
</code></pre>
<p>The Lambda function uses the token it receives and finds the media file corresponding to the unique identifier. Control is then transferred to the device with the appropriate video.</p>
<h4 id="heading-3-delegate-control-to-the-video-player">3 — Delegate Control to the Video Player</h4>
<p>Once the video that needs to be played is found, the endpoint of the media is added to the response. This requires a few lines of code within the Lambda function.</p>
<p>First, identify a folder in the S3 bucket where the video files will be stored.</p>
<pre><code class="lang-js"><span class="hljs-comment">// These are the folders where the mp4 files are located</span>

<span class="hljs-keyword">const</span> videoLoc = ‘https:<span class="hljs-comment">//s3.amazonaws.com/…/media/';</span>
</code></pre>
<p>Then specify the exact file based on what was identified by the user. Metadata is added that contains more information about the video.</p>
<pre><code class="lang-js"><span class="hljs-keyword">if</span> (<span class="hljs-built_in">this</span>.event.context.System.device.supportedInterfaces.VideoApp) {
  <span class="hljs-keyword">const</span> videoClip = videoLoc + videoObject; <span class="hljs-comment">// endpoint of the file</span>
  <span class="hljs-comment">// this will be rendered when the user selects video controls</span>
  <span class="hljs-keyword">const</span> metadata = { 
    ‘title’: slots.SongName.value 
  };
  <span class="hljs-built_in">this</span>.response.playVideo(videoClip, metadata);
  <span class="hljs-built_in">this</span>.emit(<span class="hljs-string">':responseReady'</span>);
} <span class="hljs-keyword">else</span> {
  <span class="hljs-comment">// handle error - and close the session</span>
  <span class="hljs-built_in">this</span>.emit(‘:tell’, nonVideoMessage);
}
</code></pre>
<p>After this code executes, the Alexa device will take over navigation of playing the video. The user can either use their voice or touch the screen to pause, rewind, fast-forward, etc. Here is what the screen looks like when playing a video, including the Metadata title at the top.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/KK4CNJ0uzgbElT7u2Lr-CJ2lWJJLWlrDkLzy" alt="Image" width="600" height="400" loading="lazy">
<em>Screen shot of Piano Teacher Skill on an Alexa Show</em></p>
<p>When the video playing on the device is complete, the skill can be used again to select more content.</p>
<h3 id="heading-summary">Summary</h3>
<p>Building the custom skill can be done using the example above as a template in just a few hours. The Alexa certification process takes just a day or two, then the skill (and content within it) will be available for anyone with an Echo Show. As a fan of YouTube, I hope to be able to use it on my Alexa device soon, but there’s also a way for content publishers to go around it.</p>
 ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
