Interactive video advertisement in a mobile browser
A system and a method are disclosed for presenting an interactive video ad in a mobile web browser that does not support embedded video playback in the browser. The interactive video ad comprises an overlay of transparent frame and visible elements, wherein the visible elements include instructions on performing a gesture to interact with the video ad. The system generates an HTML underlay, which is a web page with embedded link to continue playback of the interactive video ad and one or more interactivity options. The HTML underlay is displayed when the gesture is performed. Interactions with the video ad can be selected from the one or more options presented by the HTML underlay.
1. A method for displaying interactive video on a mobile device, the method comprising:
providing for display an original webpage embedded with a reference to an original video in a mobile browser;
receiving a request to play the original video in the mobile browser from a user on the mobile device;
forwarding the request to a server hosting the original video to generate an interactive video based on the original video, each frame of the interactive video comprising a frame of the original video overlaid with a transparent frame and one or more visible elements, the one or more visible elements including text and graphic instructions to interact with the interactive video and to invoke an HTML underlay page on the mobile device;
receiving from the server a link to the interactive video and the HTML underlay page, the HTML underlay page comprising an embedded link to control playback of the interactive video and including interactivity options to interact with the interactive video;
playing the interactive video including the one or more visible elements in a media player on the mobile device;
making available the HTML underlay page in the mobile browser underneath the media player simultaneously while playing the interactive video;
receiving a user interaction instructed by the one or more visible elements to pause the interactive video;
pausing the interactive video playing in the media player and removing the media player from display; and
presenting the HTML underlay page comprising the embedded link to resume the interactive video and including the interactivity options to the user in the mobile browser, the HTML underlay page being over the original webpage.
2. The method of claim 1 , further comprising:
receiving a selection of one of the interactivity options presented by the HTML underlay page from the mobile browser;
performing an interaction represented by the selection of one of the interactivity options;
receiving a request to resume playing the interactive video from the HTML underlay page; and
activating the media player and resume playing the interactive video.
3. The method of claim 1 , wherein the text and graphic instructions to interact with the interactive video and to invoke the HTML underlay page include a gesture to be performed on the mobile device.
4. The method of claim 3 , wherein the gesture corresponds to a command to close the media player.
5. The method of claim 1 , wherein the text and graphic instructions to interact with the interactive video and to invoke the HTML underlay page include a motion to change a physical state of the mobile device.
6. The method of claim 1 , wherein the interactive video includes an advertising video clip.
7. The method of claim 6 , wherein the HTML underlay page includes content associated with a brand represented by the advertising video clip.
8. The method of claim 7 , wherein the interactivity options include a link to a website or social media related to the brand represented by the advertising video clip.
9. The method of claim 1 , further comprising:
monitoring the playing of the interactive video by a piece of JavaScript code executed in the mobile browser; and
dismissing the HTML underlay page in response to detecting the media player completing playing the interactive video; and
presenting the original webpage in the mobile browser.
10. The method of claim 9 , further comprising managing the HTML underlay page simultaneously while monitoring the playing of the interactive video by the JavaScript code.
11. The method of claim 10 , wherein the managing the HTML underlay page comprises placing the HTML underlay page based on a position of the interactive video, replacing the HTML underlay page with a different HTML underlay page, or removing the HTML underlay page from the mobile browser.
12. A non-transitory computer-readable storage medium storing executable computer program instructions for displaying interactive video on a mobile device, the computer program instructions comprising instructions for:
providing for display an original webpage embedded with a reference to an original video in a mobile browser;
receiving a request to play the original video in the mobile browser from a user on the mobile device;
forwarding the request to a server hosting the original video to generate an interactive video based on the original video, each frame of the interactive video comprising a frame of the original video overlaid with a transparent frame and one or more visible elements, the one or more visible elements including text and graphic instructions to interact with the interactive video and to invoke an HTML underlay page on the mobile device;
receiving from the server a link to the interactive video and the HTML underlay page, the HTML underlay page comprising an embedded link to control playback of the interactive video and including interactivity options to interact with the interactive video;
playing the interactive video including the one or more visible elements in a media player on the mobile device;
making available the HTML underlay page in the mobile browser underneath the media player simultaneously while playing the interactive video;
receiving a user interaction instructed by the one or more visible elements to pause the interactive video;
pausing the interactive video playing in the media player and removing the media player from display; and
presenting the HTML underlay page comprising the embedded link to resume the interactive video and including the interactivity options to the user in the mobile browser, the HTML underlay page being over the original webpage.
13. The non-transitory computer-readable storage medium of claim 12 , further comprising instructions for:
receiving a selection of one of the interactivity options presented by the HTML underlay page from the mobile browser;
performing an interaction represented by the selection of one of the interactivity options;
receiving a request to resume playing the interactive video from the HTML underlay page; and
activating the media player and resume playing the interactive video.
14. The non-transitory computer-readable storage medium of claim 12 , wherein the text and graphic instructions to interact with the interactive video and to invoke the HTML underlay page include a gesture to be performed on the mobile device.
15. The non-transitory computer-readable storage medium of claim 14 , wherein the gesture corresponds to a command to close the media player.
16. The non-transitory computer-readable storage medium of claim 12 , wherein the text and graphic instructions to interact with the interactive video and to invoke the HTML underlay page include a motion to change a physical state of the mobile device.
17. The non-transitory computer-readable storage medium of claim 12 , wherein the interactive video includes an advertising video clip.
18. The non-transitory computer-readable storage medium of claim 17 , wherein the HTML underlay page includes content associated with a brand represented by the advertising video clip.
19. The non-transitory computer-readable storage medium of claim 18 , wherein the interactivity options include a link to a website or social media related to the brand represented by the advertising video clip.
20. The non-transitory computer-readable storage medium of claim 12 , further comprising instructions for:
monitoring the playing of the interactive video by a piece of JavaScript code executed in the mobile browser; and
dismissing the HTML underlay page in response to detecting the media player completing playing the interactive video; and
presenting the original webpage in the mobile browser.
21. The non-transitory computer-readable storage medium of claim 20 , further comprising instructions for managing the HTML underlay page simultaneously while monitoring the playing of the interactive video by the JavaScript code.
22. The non-transitory computer-readable storage medium of claim 21 , wherein the managing the HTML underlay page comprises placing the HTML underlay page based on a position of the interactive video, replacing the HTML underlay page with a different HTML underlay page, or removing the HTML underlay page from the mobile browser.