# Introducing CodePlayer - watch your code like a movie

DevFeed: [Introducing CodePlayer - watch your code like a movie](<https://devfeed.tech/articles/introducing-codeplayer-watch-your-code-like-a-movie-19987.md>)

Original publisher: [Read original article](<http://engineering.hackerearth.com/2014/01/21/introducing-codeplayer/>)

Published: 2014-01-21T00:00:00Z

Content type: article

Language: en

Sources: [HackerEarth](<https://devfeed.tech/sources/hackerearth.md>)

Topics: [Code](<https://devfeed.tech/topics/code.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Django](<https://devfeed.tech/topics/django.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>), [Databases](<https://devfeed.tech/topics/databases.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [backend](<https://devfeed.tech/tags/backend.md>), [batch](<https://devfeed.tech/tags/batch.md>), [browser](<https://devfeed.tech/tags/browser.md>), [code](<https://devfeed.tech/tags/code.md>), [coding](<https://devfeed.tech/tags/coding.md>), [database](<https://devfeed.tech/tags/database.md>), [demo](<https://devfeed.tech/tags/demo.md>), [development](<https://devfeed.tech/tags/development.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [load](<https://devfeed.tech/tags/load.md>), [post](<https://devfeed.tech/tags/post.md>), [server](<https://devfeed.tech/tags/server.md>), [web](<https://devfeed.tech/tags/web.md>)

## AI overview

HackerEarth introduces CodePlayer, a feature that records and replays coding activity like a video. It integrates with the site's code editors, captures editor changes, and batches requests to reduce web and database operations.

## Source excerpt

Ever thought of sharing solution of a coding problem in form of a video with someone, to teach them how you implemented the solution. Or, wanted to see what's the thought process of a potential employee when he/she solves a difficult problem. Ofcourse you have thought about it. But, it was not exactly possible to watch it as seamlessly as a movie until now. Today, we are announcing the release of HackerEarth's CodePlayer that exactly does that. tl;dr Watch a demo code video or Make your own code video. How it works CodePlayer is tightly integrated with all code editors in HackerEarth and sister site - CodeTable. That is, wherever you will find code editor in our site, there CodePlayer will also be activated. By choice, we have built it to be activated automatically in stealth mode on page load or first keystroke. Our code editor is built on top of Ace Editor. In ace editor, keystrokes or deltas can be captured and applied programmatically using Ace API. This is where the idea of playing code like a video seemed possible. CodePlayer was built on the following line of development: Setup Video Recording Keystrokes Playing Video Setup Video After the code editor is loaded, an AJAX POST request is made to server to setup video info in Django model. /** * This function sends ajax request to setup video. * This code is made generic to integrate it with code editor anywhere in site. * @arg video_obj: contains video info * @arg callback: called on success * @arg callback_arg_obj: above callback argument */ function setup_video(video_obj, callback, callback_arg_obj) { $.ajax({ url: '*****', type: 'POST', data: video_obj, dataType: 'json', callback: callback, callback_arg_obj: callback_arg_obj, success: function(response_obj) { this.callback(response_obj, this.callback_arg_obj); }, error: function(err) { } }); }; 
 Video model*(Backend)* class CodeVideo(Generic): final_code = models.TextField(null=True) # used as thumbnail lang = models.CharField(max_length=10) last_updated