Systems and methods for layering content
Systems and methods are provided that facilitate the layering of content for display. The content may be included in a first layer and a second layer having user interface and other functionalities may be overlaid on the first layer to change the look and feel of the content without actually changing the content. The systems and methods further permit the first and second layer to communicate such that events and functions may be communicated from one layer to the other. As a result a developer may be able to add user interface elements into a second layer that can call functions from the first layer and control the content in the first layer.
1. A computing device, comprising:
a memory component;
a display component;
a network interface component configured to receive content and instructions, the content and instructions including a video and a first plurality of user interface (UI) elements; and
one or more processors coupled to the network interface component, the memory component, and the display component, the one or more processors being configured to execute the instructions, the instructions causing the one or more processors to:
layer the video into a first layer and the first plurality of UI elements into a second layer;
in response to interaction, by a user, with the first plurality of UI elements, control playback of the content in the first layer;
display the second layer over the first layer on the display component;
receive a function call from the first layer in response to the user interacting with the content being played back in the first layer; and
in response to the function call:
retrieve a second plurality of UI elements, the second plurality of UI elements being different from the first plurality of UI elements and the second plurality of UI elements being configured to call one or more application programming interface (API) functions in the second layer that control the playback of the content in the first layer when one or more of the second plurality of UI elements are interacted with by the user;
add the second plurality of UI elements to the second layer; and
display the second plurality of UI elements in the second layer over the first layer on the display component.
2. The device of claim 1 , wherein the video comprises an advertisement.
3. The device of claim 1 , wherein the one or more processors are further configured to communicate events and functions between the first layer and the second layer.
4. The device of claim 3 , wherein the one or more processors are further configured to communicate events and functions that control a media portion of the content in the first layer based on user interaction with the first plurality of UI elements or the second plurality of UI elements in the second layer.
5. The device of claim 3 , wherein the memory component stores an application programming interface that defines functions for communication of events and functions between the first layer and the second layer.
6. The device of claim 5 , wherein the application programming interface defines functions for user interaction with features displayed in the second layer to control portions of the first layer.
7. The device of claim 1 , wherein the second plurality of UI elements is programmed to match a color being displayed in the first layer.
8. A method, comprising:
receiving, by a network interface component of a device, content and instructions, the content including video and a first plurality of user interface (UI) elements; and
executing the instructions by a processor, the instructions causing the processor to:
layer the video into a first layer and the first plurality of UI elements into a second layer;
in response to interaction, by a user, with the first plurality of UI elements, control playback of the video in the first layer;
display the second layer over the first layer on a display component;
receive a function call from the first layer in response to the user interacting with the content being played back in the first layer; and
in response to receiving the function call:
retrieve a second plurality of UI elements, the second plurality of UI elements being different from the first plurality of UI elements and the second plurality of UI elements being configured to call one or more application programming interface (API) functions in the second layer that control the playback of the video in the first layer when one or more of the second plurality of UI elements are interacted with by the user;
add the second plurality of UI elements to the second layer; and
display the second plurality of UI elements in the second layer over the first layer on the display component.
9. The method of claim 8 , wherein the video comprises an advertisement.
10. The method of claim 8 , wherein the instructions comprise at least one server-client object.
11. The method of claim 8 , wherein the second layer is programmable to fully control certain functionalities of a media portion of the content in the first layer.
12. The method of claim 11 , wherein the media portion of the content and the first plurality of UI elements and the second plurality of UI elements are programmed in different programming languages.
13. The method of claim 8 , wherein the instructions cause the processor to further communicate events and functions between the first and second layers using an application programming interface that defines functions for the second layer to call events and functions from the first layer and defines functions for the first layer to call events and functions from the second layer.
14. The method of claim 13 , wherein the application programming interface defines functions for user interaction with features displayed in the second layer to control portions of the first layer.
15. The method of claim 8 , wherein the second plurality of UI elements is programmed to match a color being displayed in the first layer.
16. A non-transitory computer-readable medium including instructions that, when executed by one or more processors of a computing device, cause the computing device to perform a method, the method comprising:
receiving, by a network interface component, content and instructions, the content including video and a first plurality of user interface (UI) elements;
layering the video into a first layer and the first plurality of UI elements into a second layer;
in response to interaction, by a user, with the first plurality of UI elements, controlling playback of the video in the first layer;
displaying the second layer over the first layer on a display component;
receiving a function call from the first layer in response to a user interacting with the content being played back in the first layer; and
in response to receiving the function call:
retrieving a second plurality of UI elements, the second plurality of UI elements being different from the first plurality of UI elements and the second plurality of UI elements being configured to call one or more application programming interface (API) functions in the second layer that control the playback of the video in the first layer when one or more of the second plurality of UI elements are interacted with by the user;
adding the second plurality of UI elements to the second layer; and
displaying the second plurality of UI elements in the second layer over the first layer on the display component.
17. The non-transitory computer-readable medium of claim 16 , wherein instructions are embedded in a client-server object.
18. The non-transitory computer-readable medium of claim 16 , further comprising performing an action on the first layer by calling a function associated with an interaction or event with the second layer.
19. The non-transitory computer-readable medium of claim 16 , further comprising performing an action on the second layer in response to an interaction or event with the first layer.
20. The non-transitory computer-readable medium of claim 16 , wherein the second plurality of UI elements is programmed to match a color being displayed in the first layer.