JP2016178382A - Method of producing moving image embedded web page from which display element jumps out and apparatus of the same - Google Patents

Abstract

PROBLEM TO BE SOLVED: To provide a method of producing a moving image embedded web page from which a display element that enhances a Web marketing effect and a conversion ratio jumps out, and an apparatus of the same.SOLUTION: An animation made by moving animation execution means 119 after displaying a moving image space element becomes "multiple device compatible" with a CSS screen size condition branch selection section 109 and a JavaScript(R) screen size condition branch selection section 110.SELECTED DRAWING: Figure 1

Description

  The present invention, for example, in a web page or a multi-device compatible web page, starts from clicking or tapping a playback button for a video embedded in these web pages, or starting from playback of the video automatically. As a product such as a soccer ball displayed in the frame of the video player, a message board, a text describing service contents, or an avatar or narrator, the video player's The present invention relates to a method and apparatus for creating a web page that increases the effectiveness of web marketing and the conversion rate by jumping out of the frame and performing appealing call-to-action to the viewer.

  Initially, web pages were largely created using text and images. In recent years, web pages with text and images as well as what is called moving images have been frequently seen. Compared with text and images, moving images embedded in web pages have the great advantage of being able to appeal a great deal of information to viewers in a short time. For this reason, in recent years, not only corporate sites but also personal sites have become extremely popular in which videos are embedded in web pages in addition to text and images.

  Under such circumstances, companies that have made it possible to perform two-way communication using an animation of an avatar have appeared as those that embed a moving image in a web page (see Non-Patent Document 1).

  The prior art (Non-Patent Document 1) used on the company site is “Program image creation method and apparatus” (Patent Document 1) as described in the upper right of the web page.

Japanese Patent No. 5146974

4COLORS Co., Ltd. “Challenges in video creation”, [online], creation date or upload date unknown, PIP-Maker, [searched July 19, 2014], Internet http://www.pip-maker.com/

  By the way, the above-mentioned prior art (Patent Document 1 to Non-Patent Document 1) enables bidirectional communication, and as shown in FIG. 3 of Patent Document 1 shown in the next paragraph, a program image can be displayed inside the video player. It is to provide.

  The screen configuration inside the moving image playback player using the program image created by the above-described prior art has a great feature. That is, as shown in FIG. 3 of Patent Document 1 above, a message board on which information to be transmitted to the viewer and an avatar explaining the message board are displayed.

  And this feature produces the following results: It is a problem that displaying the avatar reduces the message board describing the content that is originally intended to be communicated.

  On the other hand, in recent years, the percentage of people who browse web pages on tablet-type terminals and smartphones with smaller screen sizes is higher than on desktop personal computers and notebook personal computers. As it is reported that about 70% of the behavior on the Internet originates from smartphones, the rate of browsing web pages on smartphones is very high.

  The above-described conventional technology does not show support for multi-devices. If a web page using the above-mentioned conventional technology is made "multi-device compatible" as it is, the following problems arise. That is, as shown in FIG. 3 of Patent Document 1 shown above, there arises a problem that the message board or the product / service to be most appealed is reduced in order to make a narrator or avatar appear. In addition to this problem, the screen size of small tablets and smartphones is smaller than that of desktop computers, so the web page created using the above-mentioned conventional technology is made a multi-device compatible web page. If this web page is browsed with a small tablet terminal or smartphone, the message board and the video of the product / service will be further reduced.

  As described above, there are two problems in the conventional technique described above. These problems are also problems that display elements (images such as message boards and products / services) that should be most appealed to the viewer are reduced, and the appeal power is weakened.

  And, as mentioned above, while adopting a video that can appeal to viewers in a short amount of time in a short time as described above, image playback with elements that want to appeal to viewers embedded in web pages It came from trying to display only inside the player.

  Therefore, it is required to solve the above problem by removing the restrictions on the display elements (message boards, products, services, etc.) that are limited to being displayed only inside the image playback player embedded in the web page. ing.

  The present invention has been made in view of such conventional problems. In the prior art, for the display element that is limited to be displayed only inside the video playback player, first the idea that this display element is part of the content displayed by the video is stopped, while this display element is displayed by the video. In order to make the viewer feel that it is a part of the content, it is necessary to provide a link between the display element and the content of the moving image regardless of whether the moving image is reproduced by the auto play function. For this purpose, the animation of this display element needs to correspond to the playback time of the moving image played by the moving image playback player. If these requirements are met, in a browser with a specific range of screen sizes, it is possible to animate this display element as if it were part of the content displayed by the video inside the video playback player each time. It becomes. Thereafter, in order to remove the restriction and solve the problem, the display element jumps out of the frame of the moving image playback player. Further, the display element returns from outside the frame of the moving image playback player to within the frame according to the content of the moving image, and participates in the content of the moving image. It is an object of the present invention to provide such a “multi-device compatible” moving image embedded web page.

  The method for creating a video-embedded web page described in claim 1 of the present invention includes HTML information, CSS information, and JavaScript (JavaScript is a trademark or registered trademark of Sun Microsystems, Inc. in the United States and other countries. ) There is a web server device to which information has been uploaded, and the web server device includes all or part of an arithmetic unit, a communication unit, an input unit, a storage unit, and an output unit, and is output by the web server device. A video playback player state-specific animation start issuing unit for issuing a command set in advance according to the state of the video playback player for the video playback player displayed on the browser of the user terminal, further comprising the information, and Targeted animation by moving animation execution means after displaying video space element , Animation by moving animation element disappearance animation execution means, animations other than those displayed by these two means, countdown timer all or part of countdown animation, and further, the video playback player When playback is started, a reference timer that starts time progressing from the start of playback is externally called in or provided, and in the web server device having the above contents, a video that is played back by the video playback player An element displayed at a position inside a frame in which the moving image player is displayed is displayed by the moving animation executing means after moving image space element display set to correspond to the elapsed time from the start of reproduction. The frame in which is displayed Is characterized in that from the inside position moves to the position on the web page to be outside of said frame video playback player is displayed.

  With such a configuration, the following is achieved. For example, for a display element that is limited to being displayed only inside the video playback player in the conventional technology, this display element is first displayed to make the viewer feel that this display element is part of the content displayed by the video. It is necessary to link the elements and the content of the video. For this purpose, the animation of this display element needs to correspond to the playback time of the moving image played by the moving image playback player. If these requirements are met, in a browser with a specific range of screen sizes, it is possible to animate this display element as if it were part of the content displayed by the video inside the video playback player each time. It becomes. Thereafter, in order to remove the restriction and solve the problem, the display element jumps out of the frame of the moving image playback player. In the present invention, such a video embedded web page is created.

  By doing so, for example, the display element jumps out of the frame of the video player and out of the frame, and the viewer's interest can be attracted to the display element. Further, by doing this, it is possible to have a strong appeal effect on the contents written on the display element. In addition, in this way, the display element jumps out of the frame of the video playback player and out of the frame of the video playback player, so that the display element disappears from the frame of the video playback player. Elements and the program image can be displayed in an enlarged manner in the same frame.

  Here, regarding the web server device described in claim 1 of the present invention, as technical contents constituting the web server device, first, how to take the timing of the animation corresponding to the time will be described, and the operation and effect thereof will also be described. explain. Next, each animation described in claim 1 of the present invention will be described, and its operation and effect will also be described. Finally, other technical details and actions / effects of the web server device according to claim 1 will be described, and then the entire configuration will be described. After that, claims 2 to 10 will be described based on the description of claim 1.

  The animation start command unit according to the state of the video playback player described in claim 1 is, as the name suggests, the status of the video playback player is, for example, the state before the first playback (default), the state during playback (open the web page) The state including the state during playback by automatic playback), the state of completion of playback, the state of pause, the state of restart of playback, and the state of being buffered. This is the place where commands are issued to activate JavaScript and jQuery that make up each animation.

  By having the animation start instruction unit for each video playback player state, each animation described in claim 1 has a timing of start, stop, pause, restart of playback of the video played by the video playback player. As a result, it becomes possible to provide linkage with the contents of the moving image.

  Further, the animations described in claim 1 are concentrated in the animation start issuing unit for each moving image playback player state and the start timing is taken, whereby the animations described above can be linked.

  On the other hand, the reference timer described in claim 1 is a video playback player displayed on a video embedded web page, and grasps a time elapsed in playback of the video played by the video playback player, and relates to the time. It is a timer that displays information. And, for example, by operating each operation switch of playback start, playback stop, pause, playback restart of the video playback player, the reference timer is started, stopped, paused, restarted, and as a result, The time progress of the reference timer is controlled.

  The reference timer may count up the elapsed time of playback of the video played by the video playback player, or may count down the total playback time of the video first. In this case, the reference timer for counting down is completely different from the countdown timer described in claim 1.

  As an example of the time displayed by the reference timer, there may be mentioned the time elapsed by the time slider denoted by reference numeral 303 in FIG. 8 and the time elapsed by the moving image playback at the bottom of the moving image playback player.

  In order to prepare the reference timer described in claim 1 in the web server device described in claim 1, for example, the information for creating the reference timer is uploaded to the web server device as information described in claim 1. There may be cases. Further, for example, in order to call the information related to the reference timer described in claim 1 to the web server device described in claim 1, the call code is described in claim 1 as the information described in claim 1. You may upload to another web server device. In the latter case, for example, the above-described calling code may be included in the HTML code in order to call the video player described in claim 1 from an external server.

  As described above, each animation is operated in accordance with the elapsed time displayed on the video playback player by the presence of the animation start instruction unit for each video playback player state and the reference timer described in claim 1. Is possible.

  With such a configuration, the following timing can be taken. It is a timing method as described in the paragraph at the end of "Problem to be Solved by the Invention", such as "It makes viewers feel that this display element is part of the content shown by the video." . Also, as described in the previous paragraph, “It is necessary to link this display element and the content of the video. For this purpose, the animation of this display element corresponds to the playback time of the video played by the video playback player. If these requirements are met, in a browser with a specific range of screen sizes, this display element is an animation that appears to be part of the content projected by the video each time inside the video playback player. It is possible to take a timing such as “ Further, as with the timing, the timing is such as “this display element jumps out from the frame of the moving image playback player” described in the above paragraph.

  In the present invention, there is the following as another method of timing. The countdown timer according to claim 1 is the animation performed by the moving animation execution means after displaying the moving image space element at the timing when the countdown animation is completed, in the same manner as the processing performed by the moving image playback player state animation start issuing unit described above. It is possible to issue a command to an animation other than those displayed by the moving space element moving disappearance animation executing means, or an animation other than those displayed by these two means, and a preset animation can be executed.

  By adopting such a configuration, the animation by the moving animation execution means after moving image space element display, the animation by the moving space element disappearance animation execution means, or the animation other than those displayed by these two means described above. Each of these animations can be executed without directly issuing a command from the animation start issuing unit for each state of the moving image playback player.

  In addition, by adopting such a configuration, the countdown animation of the countdown timer described above is originally started in response to the start-up command from the above-described animation start-up unit according to the video playback player state, and thus the countdown animation is completed. If the command is issued at the timing, as a result, each of these animations can be executed so as to correspond to the elapsed time from the start of playback of the video played by the video playback player. .

  Furthermore, with such a configuration, it is possible to execute each of these animations with the viewer's attention due to the countdown effect.

  As described above, in the present invention, it is possible to take the timing based on the animation start issuing unit for each state of the video player and the timing based on the countdown timer described in claim 1. It becomes. Next, the animation of the display element will be described.

  The animation by the moving animation executing means after moving image space element display according to claim 1 is the moving image reproduction of an element displayed at a position inside the frame where the moving image reproduction player is displayed on the moving image embedded web page. The player moves from a position inside the frame in which the player is displayed to a position on the web page outside the frame in which the video player is displayed.

  Here, the animation by the moving animation execution means after the moving image space element display is used as one of the “preset” animations according to claim 1 of the present invention. Then, the moving animation execution means after displaying the moving image space element has the following four features in order to display the element within the frame of the moving image playback player.

  The first feature is that wmode, which is a parameter, is included in association with a code for reproducing a moving image, and its value is transparent. The second feature is that the CSS property for the display element includes z-index, and its value is 1 or more. The third feature is that position is included in the CSS property of the display element, and the value is set to absolute or fixed. However, when fixed, if the user scrolls the web page, the positional relationship between the moving image and the display element may be shifted. The fourth feature is that the CSS of the display element is designated so that the position of the display element is within the frame of the video player.

  In this way, elements can be displayed within the frame of the video player. Further, the moving animation execution means after moving image space element display described above has the following two special colors in addition to the above four special colors.

  The fifth spot color of the moving animation execution means after displaying the video space element is the name of the moving animation execution means after displaying the video space element. Is to move. In this movement, JavaScript or jQuery is used, for example, the position of the display element after the movement is designated by CSS, or the movement distance is designated by up / down / left / right movement. A feature of this movement is that the movement is performed from the inside of the frame of the video player.

  The sixth feature of the moving animation executing means after displaying the moving image space element is that the animation by this means is the target of the command issued from the animation starting instruction section according to the moving image playback player state, as described in claim 1 of the present invention. It is that. As a result, as described above, the animation can be synchronized with the start, stop, pause, and restart of the video that is played back by the video player. It is possible to link the contents.

  The above-mentioned moving animation execution means after moving image space element display has the above-mentioned special colors.

  Next, the animation by the animation space element moving and disappearing animation executing means described above is similar to the animation by the moving space element displaying and moving animation executing means described above. It is used as one of the animations. Further, the moving image space element moving and disappearing animation executing means described above causes the element displayed by the moving image space element displaying and moving animation executing means to disappear at a predetermined position within the frame of the same moving image playback player, or the moving image This is used when a display element outside the frame of the playback player is moved to a predetermined position within the frame and disappears.

  In order to display an element within the frame of the video playback player also in the animation space disappearance after animation moving means described above, the first to four shown in the explanation of the animation space element moving animation execution means are shown. The spot colors up to the eyes are required, and these four are part of the spot colors of the animation executing means after the moving image space element is moved.

  By doing so, the element can be displayed even when the element is within the frame of the video player. In addition to the above four special colors, the moving image space element disappearance animation execution means described above has the following two special colors.

  The fifth feature color of the animation space disappearance animation execution means, as the name of the animation space element disappearance animation execution means, has the above four characteristics, and then moves the element after moving the element. Is to eliminate. In this movement, JavaScript or jQuery is used, for example, the position of the display element after the movement is designated by CSS, or the movement distance is designated by up / down / left / right movement. A feature of this movement is that the movement is performed from outside the frame of the moving image player. This fifth spot color is greatly different from the spot color of the moving animation execution means after moving image space element display described above.

  The sixth feature of the animation space element moving and disappearing animation executing means is that, as described in claim 1 of the present invention, the animation by this means is a target of an instruction issued from the animation starting instruction section according to the animation player state. It is that. As a result, as described above, the animation can be synchronized with the start, stop, pause, and restart of the video that is played back by the video player. It is possible to link the contents.

  The above-described animation space element moving / disappearing animation execution means has the above features.

  Here, display elements will be described.

  You can also use an image for the front display element, for example, a .jpg file with a .jpg extension, a .png with a transparent background color, or a ball such as a soccer ball is rotated.gif Reality comes out when using things.

  Alternatively, if you want to apply a moving object other than a circle or a rectangle to the display element image, use a transparent background color with a .gif extension. For example, it may be used when it is desired to apply a moving person to the display element.

  By doing so, it is possible to show the viewer that a person who has climbed the castle jumps out of the video.

  Here, even when the display element is an image, the effect of call-to-action is enhanced by including characters and hyperlinks in these images.

  On the other hand, when the display element is a message board, for example, in addition to making the entire display element an image, it is displayed using CSS, and text, images, videos, contact forms, Or include either CSS or an image button.

  In addition, if a hyperlink is included in these texts, images, moving images, or buttons, the effect of call-to-action is enhanced.

  Furthermore, for example, when the display element is a square like a message board, the display element itself can be a moving image player. In this case, another video playback player is displayed in the video playback player, and another video jumps out of the video.

  By adopting such a configuration, the animation range of the display element that can be controlled by the animation start instruction unit for each animation playback player state described in claim 1 is widened. As a result, the movie playback player described in claim 1 This will expand the range of animations that are linked to the videos played on the.

  By doing this, for example, in order to display a large message board within the frame of the video, the avatar that once appeared outside the frame of the video player is moved into the frame as necessary (and then disappeared). , You can rejoin the content of the video.

  Next, the “animation other than that displayed by these two means” described in claim 1 refers to an animation that is executed only outside the frame of the video player of the web page described in claim 1. This is used as one of the “preset” animations according to claim 1 of the present invention.

  With such a configuration, the animation has linkage with the reproduction of the moving image reproduction player. As a result, the animation is executed in conjunction with the content of the moving image.

  In this way, for example, when subtitles are added to the video itself, the characters may become smaller. However, subtitles that contain text or images with characters under the frame outside the video player When the animation is performed by using as the above, it is possible to display characters larger than subtitles on the moving image itself.

  Next, the countdown animation of the countdown timer described in claim 1 is started by receiving the start command from the animation start command unit according to the above-mentioned video playback player state, and the time of the countdown timer displayed on the web page It will decrease.

  A specific example of the countdown timer is displayed as 200 in FIG. As described above, the countdown animation of the countdown timer is completely different from the case where the reference timer counts down and displays the time on the video player.

  Next, with respect to the upload destination of the video to be played back by the video player described in claim 1, for example, the video server may be directly uploaded to the web server device described in claim 1, or another web server device In some cases, a moving image may be uploaded to a web server device prepared by the moving image sharing service.

  In order to provide the video server described in claim 1 in the web server device described in claim 1, for example, all the information related to the video player is used as the information described in claim 1. In some cases, when uploading to a server device, in order to provide the video server described in claim 1 in the web server device described in claim 1, information about the video player is called from an external web server. There is a case where the code is uploaded to the web server device described in claim 1 as a code for saving and as the information described in claim 1.

  Next, the web server device described in claim 1 includes, for example, a calculation unit, a communication unit, an input unit, a storage unit, and an output unit as an overall configuration, and is locally directed toward the recording medium in the storage unit. It is configured by uploading at least HTML information, CSS information, and JavaScript information from a personal computer serving as a terminal.

  That is, the recording medium and the information uploaded to the recording medium are the core of the present invention, which is the most important feature of the present invention.

  For example, when the JavaScript information includes JavaScript or jQuery, the above-described animation playback instruction section for each moving image playback player state is configured. Also, for example, by including JavaScript or jQuery in the JavaScript information, the animation space element display moving animation execution means and the animation space element movement disappearance animation execution means described above can move the respective animations. Become. In addition, for example, when JavaScript or jQuery is included in the JavaScript information, each animation described in claim 1 of the present invention moves.

  For example, each of the display elements described above can be displayed on a web page by recording the HTML information, CSS information, and JavaScript information on the recording medium. The above is the claim 1.

  The video embedded web page creation method according to claim 2 of the present invention is set in the web server device so as to correspond to an elapsed time from the start of playback of the video played by the video playback player. The moving image executing means after displaying the moving image space element displays the moving image from the position inside the frame where the moving image playback player is displayed as the element displayed at the inner position of the frame where the moving image playback player is displayed. The player moves while expanding to a position on the web page that is outside the frame in which the player is displayed.

  By adopting such a configuration, for example, when the display element is moved using JavaScript or jQuery, the following can be performed. That is, as explained in the spot color of the fifth of each of the two means described above, when the position of the display element after movement is designated by CSS and moved, the display element pops out and expands It will be like that. For example, the following is recommended.

  It specifies the size of the display element after the movement by adding width and height to the CSS property for the position after the movement, and sets the value of the property so that it is larger than the original size. It is to specify. In addition to this, when the display element is an image or a moving image, a liquid layout is adopted, for example. It is to use the percentage for the value of width which is a CSS property.

  By doing this, for example, during the movement of the display element by the moving animation execution means after the moving image space element display described above, the soccer ball or the message board that becomes the display element displayed in the frame of the moving image playback player moves. While expanding. In the present invention, such a video embedded web page is created.

  The user who sees this feels a sense of perspective and feels as if the soccer ball or message board has jumped out of the video, and as a result, is surprised. By doing so, it is possible to strongly appeal the call to action to the viewer. The above is the second aspect.

  According to a third aspect of the present invention, there is provided a method for creating a video embedded web page corresponding to an elapsed time from the start of playback of a video played by the video player in the web server device according to claim 1. An element displayed at a position on a web page outside the frame in which the moving image playback player according to claim 1 is displayed by the moving space disappearance animation executing means set as described above is the moving image playback player. Moves from the position on the web page outside the frame where the video is displayed to the position inside the frame where the video player is displayed, and then disappears inside the frame where the video player is displayed It is characterized by that.

  With such a configuration, for example, a display element outside the frame of the moving image playback player can be moved to a predetermined position within the frame and disappear. In the present invention, such a video embedded web page is created.

  In this way, for example, in order to display a large message board within the frame of the video playback player, the avatar once out of the frame of the video playback player is moved into the frame as necessary to make the content of the video. Can participate again.

  In this way, for example, an avatar that has been objectively narrated about the content of the video outside the frame of the video player until then moves into the video and is played in the video. Can be a character. As a result, the user's interest can be directed to the content of the video. The above is the third aspect.

  According to a fourth aspect of the present invention, there is provided a method for creating a video embedded web page, wherein when the playback of the video played back by the video playback player according to claim 1 is paused, the time progress of the reference timer is also temporarily stopped. In addition to stopping, when the playback of the video played back by the video playback player according to claim 1 is paused and the status of the video playback player changes, the above-described animation start command unit for each video playback player state changes. The animation by the moving animation execution means after moving image space element display, the animation by the moving animation execution means after moving image space element described in claim 1, an animation other than those displayed by these two means, a countdown timer All or part of the countdown animation In the web server device in which the line is paused, resuming the video that is paused in the video player is resumed in addition to resuming the time progress of the reference timer. It is characterized by the progress of the animation being resumed.

  By adopting such a configuration, for example, it becomes as follows. When the pause button of the video playback player in the web page displayed on the user terminal is clicked or tapped (when a click or tap event is performed), the progress of the reference timer time is paused. In addition, the state of the video player changes from a playback state to a paused state.

  Due to this change, and starting from this change, for example, the function of “processing animation” or “calling by executing the animation” related to the suspension of the animation start instruction unit according to the moving image playback player state according to claim 1. Function responds. Here, the “process animation” function is configured by JavaScript or jQuery, for example, and directly describes the code relating to the animation. On the other hand, the “execute and call animation” function is configured by, for example, a function name that is a name of the process (s) related to animation and a parenthesis ().

  By doing so, the animation by the moving animation execution means after moving image space element display, the animation by the moving animation execution means after moving image space element, which are set in advance by the animation start issuing unit according to the state of the video playback player according to the occurrence of the event, these Animations other than those displayed by the two means described above, countdown animations of the countdown timer, and the respective “process animation” function or “execute and call animation” function work to temporarily stop the progress of the animation. Can be stopped.

  Thereafter, when the resume button (start button) of the video playback player in the web page displayed on the user terminal is clicked or tapped, the progress of the time of the reference timer is resumed, and the video playback player Changes from a paused state to a playback state.

  With this change, and starting from this change, for example, a function of “processing animation” or “function to execute and call animation” related to the restart of the animation start instruction unit according to the state of the moving image playback player according to claim 1 Will respond.

  By doing so, the animation by the moving animation execution means after moving image space element display, the animation by the moving animation execution means after moving image space element preset in the animation start command unit according to the moving image playback player state described above according to the occurrence of the event , Animations other than those displayed by the two means, and countdown animation of the countdown timer, and the respective functions of “process animation” or “execute animation and call” function, Each animation can be resumed. In the present invention, such a video embedded web page is created.

  By doing as described above, even if the video played by the video playback player may be paused in the middle, the above-described call start target unit is activated by the above-described video playback player state animation start issuing unit. The progress of the animation coincides with the progress of the time of the reference timer. As a result, even if the video is paused in the middle, the content of the video played by the video playback player matches the progress of the animation, and the animation matches the content of the video. Will progress with linkage.

  As a result, in the present invention, in order to solve the problems of the above-described prior art, even if the video played by the video playback player may be paused in the middle, the “problem to be solved by the invention” "This display element and the content of the video need to be linked to each other." To do so, the animation of this display element needs to correspond to the playback time of the video played on the video playback player. Satisfying these requirements, in a browser with a specific range of screen sizes, this display element will animate each time inside the video player as if it were part of the content shown by the video. The animation can be advanced. "

  In addition, in the animation start command unit for the animation playback player state described above, the code related to the function “execute animation and call” and the function “process animation” corresponding to the function “execute animation and call” The code related to the function “execute animation and call” and the code related to the function “process animation” may be described together. . The above is the fourth aspect.

  According to a fifth aspect of the present invention, there is provided a method for creating a video embedded web page, wherein in the web server device according to the first aspect, the video is automatically played back by the setting of the video playback player according to the first aspect. When the start button of the video player is clicked or tapped for the first time, the time progress of the reference timer according to claim 1 is started, and the status of the video player is set. The moving animation after the moving image space element display according to claim 1, by the animation starting instruction unit according to the moving image playback player state according to claim 1, wherein the moving image is changed from a stopped state to an initial playback state. Animation by means of execution, animation by means of animation that disappears after moving the video space element Is characterized in that the animation than those displayed by these two said means, the progress of all or part of the countdown timer countdown animation starts.

  By adopting such a configuration, for example, it becomes as follows. 2. When the start button of the video playback player in the web page displayed on the user terminal is clicked or tapped for the first time, the progress of the time of the reference timer according to claim 1 is started. The playback player state changes from the default state to the initial playback state.

  Due to this change, and starting from this change, for example, the “execute animation and call” function of the animation start command unit for each moving image playback player state according to claim 1 responds. The animation by the moving animation execution means after moving image space element display according to claim 1, which is set in advance in the animation start issuing unit according to the moving image playback player state described above in accordance with the occurrence of the event, moving image space element movement The animation by the post-annihilation animation execution means, the animations other than those displayed by these two means, the countdown animation of the countdown timer, and the respective “execute and call animation” functions work. The “call” function issues a start command to the animation, so that the progress of the animation can be started. In the present invention, such a video embedded web page is created.

  In this way, the progress of the “preset” animation matches the progress of the time of the reference timer. As a result, the progress of the time taken to play back the moving picture played back by the moving picture playback player matches the progress of the animation.

  This also ensures that when the user opens the web page, the video embedded in the web page is still and the animation on the web page associated with the video is still. First, when the start button of the video player is clicked or tapped for the first time, the animation is performed in accordance with the time progress of the video.

  As a result, in the present invention, in order to solve the above-described problems of the prior art even when the video player is set not to perform automatic playback, the “problem to be solved by the invention” is described. As described in the last paragraph, “This display element must be linked to the content of the video. To do this, the animation of this display element needs to correspond to the playback time of the video played on the video playback player. If these requirements are met, in a browser with a specific range of screen sizes, this display element may be animated each time inside the video playback player as if it were part of the content projected by the video. It becomes possible to start the animation.

  It should be noted that a description relating to the operation of the animation may be made directly without providing the “execute animation and call” function in the animation start instruction unit for each moving image playback player state described above. The above is the fifth aspect.

  According to a sixth aspect of the present invention, there is provided a method for creating a moving image embedded web page, wherein the web server device according to the first aspect does not perform automatic reproduction with the setting of the moving image reproducing player according to the first aspect. In this case, the reference timer described in claim 1 is started, the animation is started by the moving animation execution means after the moving image space element is displayed, and the animation is started by the moving animation execution means after the moving space element is moved. All or part of the start of animation other than that displayed by the means and the start of the countdown animation of the countdown timer are executed starting from the fact that the web page according to claim 1 is scrolled by a predetermined value. It is characterized by that.

  In this case, for example, a scroll that is a jQuery standard event can also be used.

  With this configuration, for example, the web page is scrolled by a predetermined value even in the web page displayed on the user terminal even if the video player is not arranged at the top of the web page. As a starting point, the animation can be started, and a moving image reproduced by the moving image reproduction player can be reproduced. In the present invention, such a video embedded web page is created.

  In this way, even if the video playback player is set not to automatically play and the video playback player is not arranged at the top of the web page, the web page is displayed. When scrolling by a predetermined value, the progress of the “preset” animation and the progress of the time of the reference timer are executed in agreement. As a result, the time progress of the reproduction of the moving image reproduced by the moving image reproduction player coincides with the progress of the animation.

  As a result, in the present invention, even when the video playback player is set not to perform automatic playback in the setting of the video playback player, and even when the video playback player is not arranged at the top of the web page, the above described In order to solve the problems of the prior art, “the display element and the content of the moving image need to be linked as described in the last paragraph of“ Problems to be Solved by the Invention ”. The element's animation must correspond to the duration of the video being played on the video playback player, and if these requirements are met, this display element will be internal to the video playback player each time in a specific range of screen size browsers. Thus, it is possible to perform an animation as if it were a part of the content shown by the moving image. " It becomes possible to start the animation. The above is the sixth aspect.

  The web server device according to claim 7 of the present invention includes uploaded HTML information, CSS information, and JavaScript information, and all or part of the calculation unit, communication unit, input unit, storage unit, and output unit. And a video playback player state-specific animation start issuing unit that issues a command set in advance according to the status of the video playback player for the video playback player displayed on the browser of the user terminal. An animation by the moving animation execution means after displaying the moving image space element, which is provided with the reference timer and is the target of the command, provided with a reference timer starting from the start when playback is started. , A program for causing a computer to execute the animation In the storage unit, the above-described recording medium is recorded in the storage unit, and the animation by the moving animation execution means after the moving image space element display described above is placed at a position inside the frame in which the moving image playback player is displayed. The displayed element moves from a position inside the frame where the video player is displayed to a position on the web page outside the frame where the video player is displayed. The storage unit includes a recording medium recorded as a program for causing a computer to execute the animation.

  With such a configuration, the following is achieved. For example, for a display element that is limited to being displayed only inside the video playback player in the conventional technology, this display element is first displayed to make the viewer feel that this display element is part of the content displayed by the video. It is necessary to link the elements and the content of the video. For this purpose, the animation of this display element needs to correspond to the playback time of the moving image played by the moving image playback player. If these requirements are met, in a browser with a specific range of screen sizes, it is possible to animate this display element as if it were part of the content displayed by the video inside the video playback player each time. It becomes. Thereafter, in order to remove the restriction and solve the problem, the display element jumps out of the frame of the moving image playback player. In the present invention, it is possible to provide a web server device that returns information of such a moving image embedded web page as output data to a user terminal.

  Further, with such a configuration, the progress of the animation by the moving animation execution means after the moving image space element display described above matches the progress of the time of the reference timer. As a result, the time progress of the reproduction of the moving image reproduced by the moving image reproduction player coincides with the progress of the animation.

  In this way, for example, the display element can animate in accordance with the content of the moving image, and the display element jumps out of the frame of the moving image playback player. Can be attracted to the display element. Further, by doing this, it is possible to have a strong appeal effect on the contents written on the display element. In addition, in this way, the display element jumps out of the frame of the video playback player and out of the frame of the video playback player, so that the display element disappears from the frame of the video playback player. About an element and the said program image, these can be further expanded and displayed within the same frame.

  The other operations and effects of the web server device according to the seventh aspect of the present invention are as described in the description of the first aspect.

  As a result of the above, in the present invention, in order to solve the above-described problems of the prior art, the restriction that “the image is displayed only inside the video player” described in the last paragraph of “Problems to be solved by the invention” is provided. In order to make viewers feel that this display element is part of the content projected by the video, while stopping the idea that this display element is part of the content projected by the video. Regardless of whether or not the moving image is played back by the auto play function, it is necessary to link the display element and the content of the moving image. If these requirements are met, this display element can be used in browsers with a certain range of screen sizes. Each time it is possible to animate the video player as if it were part of the content shown by the video, then remove this restriction and solve this problem with this display element. Can jump out of the frame of the moving image playback player to the outside of the frame. "It is possible to provide a web server device that returns the information of the embedded web page as output data to the user terminal. The above is the seventh aspect.

  The web server device according to claim 8 of the present invention includes uploaded HTML information, CSS information, and JavaScript information, and all or part of the calculation unit, communication unit, input unit, storage unit, and output unit. And a video playback player state-specific animation start issuing unit that issues a command set in advance according to the status of the video playback player for the video playback player displayed on the browser of the user terminal. An animation by the moving animation execution means after displaying the moving image space element, which is provided with the reference timer and is the target of the command, provided with a reference timer starting from the start when playback is started. , A program for causing a computer to execute the animation In addition to the above, the recording medium recorded as a recording medium is provided in the storage unit, and the animation by the moving animation execution means after the moving image space element display is displayed at a position inside the frame where the moving image playback player is displayed. The moving element moves from a position inside the frame where the video playback player is displayed to a position on the web page outside the frame where the video playback player is displayed, and a video space element As for the progress of the animation by the moving animation execution means after display, when the pause button of the video playback player is clicked or tapped, it is paused, and then the playback of the video played back by the video playback player is resumed. If you do, the progress of the animation will resume. The recording medium storing a program to be executed by the serial animation and said computer for traveling is characterized in that it comprises in the storage unit.

  By setting it as such a structure, the web server apparatus which can be shown in the location of description of the said Claim 4 can be provided.

  As a result, in the present invention, in order to solve the problems of the above-described prior art, even if the video played by the video playback player may be paused in the middle, the “problem to be solved by the invention” "This display element and the content of the video need to be linked to each other." To do so, the animation of this display element needs to correspond to the playback time of the video played on the video playback player. Satisfying these requirements, in a browser with a specific range of screen sizes, this display element will animate each time inside the video player as if it were part of the content shown by the video. Of the video-embedded web page that will be able to start the animation. The distribution, it is possible to provide a web server device to return to the user terminal as the output data.

  The web server device according to claim 9 of the present invention includes uploaded HTML information, CSS information, and JavaScript information, and all or part of the calculation unit, communication unit, input unit, storage unit, and output unit. And a video playback player state-specific animation start issuing unit that issues a command set in advance according to the status of the video playback player for the video playback player displayed on the browser of the user terminal. When the reproduction is started, a reference timer that starts time progress from this is provided, and the animation by the moving animation execution means after the moving image space element display that is configured by the information and is the target of the command, A program for causing a computer to execute an animation In the storage unit, the recording medium recorded as is provided with the above, and the animation by the moving animation execution means after the moving image space element display is displayed at a position inside the frame where the moving image playback player is displayed. The element moves from a position inside the frame in which the video playback player is displayed to a position on the web page that is outside the frame in which the video playback player is displayed. The animation by the post-movement animation executing means starts when the start button of the video player is first clicked or tapped for the first time, and as described above, the recording medium recorded as a program for causing the computer to execute the animation Is provided in the storage unit. There.

  By setting it as such a structure, the web server apparatus which can be shown in the location of description of the said Claim 5 can be provided.

  As a result, in the present invention, in order to solve the above-described problems of the prior art even when the video player is set not to perform automatic playback, the “problem to be solved by the invention” is described. As described in the last paragraph, “This display element must be linked to the content of the video. To do this, the animation of this display element needs to correspond to the playback time of the video played on the video playback player. If these requirements are met, in a browser with a specific range of screen sizes, this display element may be animated each time inside the video playback player as if it were part of the content projected by the video. The video-embedded web page information that enables the animation to be started. , It is possible to provide a web server device to return to the user terminal as the output data. The above is the ninth aspect.

  The web server device according to claim 10 of the present invention is similar to the web server device according to claims 1 to 9, and includes a CSS screen size conditional branch including a media query for switching CSS corresponding to the screen size of the device. A JavaScript screen including a conditional expression for corresponding to the screen size of the device in order to make the selection unit and the position of the display element to be animated correspond to the web page whose layout width has been changed by using the media query. A size condition branch selection unit is provided to return the corresponding data to the device so as to display a pre-designated video embedding type web page for user terminals of various sizes, and to cause the computer to execute A recording medium recorded as a program It is characterized by.

  By adopting such a configuration, for example, even if the screen size of the browser differs for the device of the user terminal, it corresponds to the screen size of the device according to claims 1 to 6 of the present invention. Web page can be displayed. According to the present invention, it is possible to provide a web server device that includes a recording medium recorded as the program and returns information on an embedded web page as output data to a user terminal.

  Further, the present invention can solve the following problems of the responsive web design that has begun to spread most widely as a method for making a web page “multi-device compatible”. The problem is caused by the overall design being disrupted by responsive web design. Specifically, in responsive web design, the positional relationship of displayed elements varies greatly depending on the screen size of the browser. That is.

  Therefore, it is necessary to correct the position and moving distance of the display element that performs the animation described above. In the web server device according to the tenth aspect of the present invention, the problem relating to the correction can be solved.

  Here, as is widely known, the responsive web design (Web design) method for creating the web page by providing the same HTML with a single URL to all devices and using CSS to change the design for each device. Or responsive web design or responsive design). Or, a web page construction method that uses CSS3 media query to change the appearance. Prepare a common HTML regardless of the device, and use CSS media query to display the page from the screen size. The method of judging a device, selecting a CSS, and changing the design is called responsive web design (or responsive web design or responsive design).

  The main concept behind the responsive web design is fluidity and proportionality as opposed to fixed width layout, so the responsive web design is a percentage that is a relative unit of width value. It is recommended to use.

  On the other hand, as for the response to the multi-device of the video embedded web page that can be realized by the web server device according to claim 10 of the present invention, as in the responsive web design, “one common HTML regardless of the device is used. Prepare and use CSS media query to judge the device from the screen size to display the page, select the CSS and change its design ", but exclude the" fixed width layout " is not. Therefore, it can be said that the video embedded web page that can be realized by the web server device according to claim 10 of the present invention is not strictly the responsive web design.

  Here, the CSS screen size conditional branch selection unit refers to a location including a media query for switching CSS corresponding to the screen size of the device, and plays a role of selecting the one corresponding to the screen size from the CSS . For example, it refers to a place where CSS is switched for each screen size of a device by using min-width or max-width that is a media attribute as a link element in an HTML head tag. In addition, for example, it points to a part of CSS source that uses @media screen to switch CSS for each device screen size.

  On the other hand, the JavaScript screen size conditional branch selection part is necessary to associate the position of a dynamic display element with a web page whose layout width has changed by using the media query. As a place to perform, it refers to a location including a conditional expression of JavaScript for making it correspond to the screen size of the device, and plays a role of selecting the one corresponding to the screen size from JavaScript. For example, the conditional expression may be described in JavaScript corresponding to the individual dynamic display elements described above, or in the HTML as described in the CSS screen size conditional branch selection section. In some cases, JavaScript may be switched for each screen size.

  As described above, when the video embedded web page of the present invention is set to “multi-device compatible”, the screen size branch point in the CSS screen size condition branch selection unit is the screen in the JavaScript screen size condition branch selection unit. Affects the size branching point. According to the present invention, it is possible to provide a web server device that returns information of such a moving image embedded web page as output data to a user terminal. The above is the tenth aspect.

  According to the invention according to each claim of the present application, display elements (message board, product / service, etc. that should be most appealed) displayed in the frame of the video playback player of the video embedded web page are matched with the content of the video. Therefore, after an animation is performed within the same frame in accordance with the playback time of the moving image playback player, it is possible to jump out of the same frame outside the same frame (while enlarging it). In addition, the movement of the avatar or narrator displayed in the same frame can be moved from the same frame to the outside of the same frame while keeping the playback time of the video playback player linked to the content of the video.

  As a result, in the conventional technique, the display element or avatar or narrator described above is limited to be displayed only inside the image playback player embedded in the web page, but is released from the limitation. This not only strongly appeals the content displayed on the display element, but the number of elements displayed in the frame of the video playback player by moving the display element or avatar or narrator out of the frame can be reduced. As a result, the display ratio of each element displayed in the frame of the moving image playback player can be increased.

  Therefore, as shown in FIG. 3 of Patent Document 1 shown above, the present invention has a problem that the display elements (message boards, products, services, etc. that should be most appealed) are reduced in order to make narrators and avatars appear. Then it can be solved.

  In addition, according to the invention according to each claim of the present application, the display element (message board or product / service to be most appealed, etc.) displayed in the frame of the video playback player of the video embedded web page corresponding to the multi-device. ) In order to match the content of the video, the animation is played within the same frame while being linked to the playback time of the video player, and then jumped out from the same frame to a predetermined position outside the same frame. it can. That is, it can be displayed so that an object pops out from the moving image.

  This can surprise the viewer. In addition to not only appealing to viewers what they want to appeal, the conventional technology (Patent Literature 1 to Non-Patent Literature 1) described above as shown in FIG. The present invention solves the problem that the display elements (such as message boards and products / services that should be most appealed) would be reduced, even if the web page using the URL could not be solved as “multi-device compatible” as it is. be able to.

It is a block diagram of one embodiment of the present invention. (Examples 1 to 4) It is a block diagram showing the form of the Web server apparatus utilized by this invention. (Examples 1 to 4) It is a flowchart which shows the processing step of web page creation performed in order to make the animation embedding type web page of one Embodiment of this invention respond | correspond to responsive web design. (Examples 1 to 4) It is a flowchart which shows the processing step of JavaScript performed in order to make the animation embedded type web page of one Embodiment of this invention respond | correspond to responsive web design. (Examples 1 to 4) It is a flowchart which shows the process step for producing the soccer ball which is displayed on the surface of a moving image and animates about the moving image embedding type web page of one Embodiment of this invention. (Example 1 and Example 4) It is a flowchart which shows the process step which concerns on the moving animation execution means after the moving image space element display of one Embodiment of this invention. (Examples 1 to 4) It is a flowchart which shows the processing step which concerns on the animation animation element after animation space element movement of one Embodiment of this invention. (Examples 1 to 4) It is the schematic which shows the web page image of one Embodiment of this invention. Example 1 It is the schematic which shows the web page image of one Embodiment of this invention. (Example 2) It is the schematic which shows the web page image of one Embodiment of this invention. (Example 3) In the example of the script in one Embodiment of this invention, it is the schematic which shows the relationship between the animation HTML code | cord | chord and the start / movement / pause / resume / end of an animation on the basis of the elapsed time of animation reproduction | regeneration. It is a statistical table which shows an example of the access information of the viewer used in other invention. It is a statistical table which shows an example of the access information of the viewer used in other invention. It is a statistical table which shows an example of the access information of the viewer used in other invention.

  FIG. 8 (soccer ball popping out from a video frame) and FIG. 9 (apply button popping out from a video frame) are shown below for one mode for carrying out the present invention among those already realized in the local environment with reference to the drawings. A specific explanation will be given based on the contents of the message board.

  However, when a person skilled in the art implements a website-related invention created by another person, the simplest method is to have all the source code disclosed. For website-related inventions, it is the easiest way to have the source code disclosed rather than to explain it with diagrams or words. The source code is disclosed as an embodiment of the present invention at the end of the form for implementing the above. The present invention is not limited to the following examples.

  First, the outline will be described before the source code is disclosed.

  In FIG. 1, reference numeral 100 denotes a Web configured by uploading the data (102 to 107 in FIG. 1) that is the basis of the web page created by the present invention to a storage medium denoted by reference numeral 101. 1 illustrates one embodiment of a server device.

  In FIG. 1, the upload local terminal 010 is located outside the Web server device (100 in FIG. 1), and the data (102 to 107 in FIG. 1) is created by this local terminal. Then, it is used when the data is uploaded to the Web server device (100 in FIG. 1).

  In FIG. 1, reference numerals 021 to 023 denote Internet networks.

  In FIG. 1, reference numeral 030 is an upload destination when uploading a video to a Web server device that is an upload destination when uploading a video using the video sharing service or a Web server device other than 100. 1 shows a Web server device.

  On the other hand, in FIG. 1, the moving image data denoted by reference numeral 106 is uploaded to the storage medium denoted by reference numeral 101 without using the moving image distribution Web server device denoted by reference numeral 030, and is displayed when the moving image is displayed on a moving image embedded web page. It is what you use.

  In FIG. 1, after uploading video data to the Web server device denoted by reference numeral 030, this video is played back by the video playback player of the web page with embedded video, and the video data denoted by reference numeral 106 is uploaded separately. May be used as an element that pops out of the video player as shown in the image below. On the other hand, the moving image uploaded to the moving image distribution Web server denoted by reference numeral 030 can be used as the pop-up element, and the moving image denoted by reference numeral 106 can be utilized as the moving image reproduced by the moving image reproduction player.

  In FIG. 1, a user terminal denoted by reference numeral 040 is used to access the web server device (100 in FIG. 1) and view a web page with a browser. In recent years, the number of user terminals is increasing not only on desktop but also on smartphones and tablets, so even if it ’s a video-embedded web page or a web page with dynamic animation, Multi-device support leads to more efficient site management.

  In FIG. 1, reference numeral 108 denotes a database.

  Further, in FIG. 1, a CSS screen size condition branch selection unit denoted by reference numeral 109 is a location including a media query related to the screen size of the device. When CSS is prepared for each device screen size range as an external file other than HTML, a link tag is usually prepared for each device screen size range in the HTML head part. If a link tag is prepared, for example, the CSS screen size conditional branch selection unit includes a part where there is a media query for switching CSS corresponding to the screen size of the device, as in the image shown in the next paragraph, Refers to a tag.

  On the other hand, instead of the media attribute as the link element as in the image above, if you prepare CSS for each device screen size range using multiple @media in the CSS source, select the CSS screen size conditional branch The part includes (a plurality of) places where @media is described.

  In the present invention, the CSS may be an external file as in the above image, or may be directly written in HTML. CSS can be written in a single file, or it can be written in separate files for each device screen size, as in the image above.

  However, in the present invention, since video and animation are added to the web page, when considering the reading speed to the device, it is better to write separately using link tags for each device screen size as in the above image. , There is an advantage that reading speed becomes faster because each is read into the device in parallel. Therefore, it is better to write the CSS separately for each device screen size as shown in the image above, rather than writing the CSS in a single file.

  Then, the CSS screen size condition branch selection unit includes a request processing unit (112 in FIG. 1) including a device size acquisition unit (113 in FIG. 1) as the user agent information of the browser of the user terminal (040 in FIG. 1). After obtaining the screen size of the screen of the terminal, the information is received, and the one corresponding to the screen size is selected from the CSS of reference numeral 104 based on the information.

  Further, in FIG. 1, the JavaScript screen size condition branch selection unit denoted by reference numeral 109 includes a part describing a conditional expression related to the screen size of the device in JavaScript (102 in FIG. 1). For example, it includes a portion where the screen size of the device is described by a conditional expression using if in JavaScript (102 in FIG. 1).

  Then, the JavaScript screen size condition branch selection unit includes a request processing unit (112 in FIG. 1) including a device size acquisition unit (113 in FIG. 1) as the user agent information of the browser of the user terminal (040 in FIG. 1). After obtaining the screen size of the terminal screen, the information is received, and the one corresponding to the screen size is selected from the JavaScript code 102 based on the information.

  The JavaScript screen size conditional branch selection unit is appropriately influenced by the CSS screen size conditional branch selection unit for the branch point of the screen size of the device in order to appropriately display the dynamic display elements on the web page. For example, if the CSS screen size conditional branch selection part contains 640px and 480px for the branch point of the device's screen size, the JavaScript screen size conditional branch selection part should include these two branch points for animation. It becomes easier to manage the position of the.

  Therefore, it is better to align the branch points of the device screen size in the CSS screen size conditional branch selection unit and the JavaScript screen size conditional branch selection unit.

  In FIG. 1, a device table 111 is a CSS screen size condition branch selection unit for efficiently acquiring the screen size of the screen as user agent information of the browser of the user terminal (040 in FIG. 1). This is a summary of the screen size of the device specified in.

  Further, in FIG. 1, the response processing unit 114 including the display unit 115 responds when there is an access from the user terminal 040 to the video embedded web page output by the Web server device 100. Thus, the information (output data) necessary for displaying the video embedded web page is output.

  Further, in FIG. 1, the video playback player information processing unit 116 is a part that controls information necessary for playing back a video on the video playback player of the video embedded web page, and is a standard unique to the video playback player. A timer (118 in FIG. 1) is read in or provided from the outside, and in addition, an animation start issuing unit (117 in FIG. 1) according to the state of the moving image playback player is provided.

  Here, the reference timer 118 in FIG. 1 controls, for example, the time displayed on the time slider 303 or the moving image playback player in FIG. 8 to FIG. 10 and the time slider is forcibly moved. Changes with the time of the reference timer. However, in this case, in the present embodiment, each animation described above is not affected by the change.

  On the other hand, in FIG. 1, the animation start issuing unit 117 for each moving image playback player state indicates, as the name indicates, the state of the moving image playback player, for example, the state before the first playback (default), the state during playback, and the end of playback. This is the location where a command is issued to activate JavaScript or jQuery that make up an animation when the status, pause status, or buffer status changes. For example, it includes a portion in which an “animation is executed and called” function such as one of the images shown in the following two paragraphs is described.

  The above-described animation start instruction unit for moving image playback player state has the following characteristics.

  When the start button of the video playback player in the web page displayed on the user terminal (040 in FIG. 1) is clicked or tapped for the first time, the video playback player is changed from the default state to the initial playback state. To change.

  With this change, starting from this change, JavaScript / jQuery (FIG. 1) in the video playback player information processing unit (116 in FIG. 1) that manages information about the video displayed on the video embedded web page. 102) of the moving image playback player state-specific animation start issuing unit (117 in FIG. 1) is configured. The animation by the moving animation execution means after moving image space element display, the animation by the moving animation execution means after moving image space element, which is set in advance in the animation start issuing unit according to the video playback player state described above according to the occurrence of the event, Animations other than those displayed by the means, countdown animation of the countdown timer, each of these "execute animation and call" functions work, this "execute animation and call" function to give the animation start command Thus, the progress of the animation can be started.

  Also, starting from the first click or first tap of the start button of the video player, the time of the reference timer (118 in FIG. 1) starts to advance.

  In other words, these two progressions have a common point that the starting point of the start button or the first tap of the moving image playback player is the starting point. For this reason, the time progress of the “preset” animation matches the time progress of the reference timer (118 in FIG. 1). As a result, the time progress of playback by the moving image playback player coincides with the time progress when dynamic continuous animation such as movement of elements displayed on the web page is performed.

  In this way, when a user using the user terminal (040 in FIG. 1) opens a web page, the video embedded in the web page is still and the animation on the web page associated with the video is also static. Even when the video player is still in a stationary state, when the start button of the video player is clicked or tapped for the first time, the animation is performed in accordance with the time progress of the reference timer.

  As a result, the animation can be described as “to make the viewer feel that it is a part of the content displayed by the video, so that the content is linked to the content of the video”. Become. Further, when a plurality of animations are executed, since the time progress of the reference timer can be used as a reference, the animations can be linked.

  In FIG. 1, the moving animation execution means after moving image space element display 119 is used as the “preset” animation. Then, the moving animation execution means after moving image element display described above has the following four features in order to display elements within the frame of the moving image playback player.

  The first feature is that, for example, as in the image shown in the next paragraph, a wmode as a parameter is included in association with a code for reproducing a moving image, and its value is set to transparent.

  The second spot color is that the CSS property related to the display element includes z-index, and its value is set to 1 or more, for example, as in the image shown in the next paragraph. The third feature is that position is included in the CSS property of the display element, and the value is set to absolute or fixed. However, when fixed, if the user scrolls the web page, the positional relationship between the moving image and the display element may be shifted. The fourth feature is that the CSS of the display element is designated so that the position of the display element is within the frame of the video player.

  In this way, elements can be displayed within the frame of the video player (202 in FIG. 8, 402 in FIG. 9, 402 in FIG. 10). Further, the moving animation execution means after moving image space element display described above has the following two special colors in addition to the above four special colors.

  The fifth spot color of the moving animation execution means after displaying the video space element is the name of the moving animation execution means after displaying the video space element. Is to move. In this movement, JavaScript or jQuery (102 in FIG. 1) is used, for example, the position after movement of the display element is designated by CSS, or the movement distance is designated by up / down / left / right movement. I will let you. A feature of this movement is that the movement is performed from the inside of the frame of the video player.

  The sixth feature of the moving animation execution means after the moving image space element display is that, as described in claim 1 of the present invention, the animation by this means is output from the animation starting instruction section (117 in FIG. 1) according to the moving image playback player state. It is the target of the order to be. As a result, as described above, the animation can be synchronized with the start, stop, pause, and restart of the video that is played back by the video player. It is possible to link the contents.

  The above-mentioned moving animation execution means after moving image space element display has the above-mentioned special colors.

  Here, for example, in addition to the extension of .jpg or .png for the display element, a reality can be obtained by using a rotating .gif for a soccer ball or the like (202 in FIG. 8). It is effective to put a company logo or the like on the soccer ball jumping out from the video player. When the display element is an image, characters and hyperlinks may be included in the image to enhance the effect of call to action.

  On the other hand, when the display element is a message board (402 in FIG. 9 and 402 in FIG. 10), for example, the entire display element is not displayed as an image but is displayed using CSS. Text, images, moving images, forms, or buttons for CSS and images may be included (403, 404, and 405 in FIG. 9). In addition, hyperlinks may be included in these to enhance the effect of call to action (405 in FIG. 9). Furthermore, when the display element is a square such as a message board, the display element itself may be a moving image. In this case, another moving image playback player is displayed in the moving image playback player. As shown using the image above, the viewer will be surprised when the latter video player jumps out of the frame of the former video player or jumps out while rotating. In the video embedded type web page that can be realized by the source code shown later, the message board displayed in the video playback player is set to expand and jump out while rotating horizontally at a specified timing.

  Also, in FIG. 1, the moving image space element disappearance animation executing means indicated by reference numeral 120 is used as the “preset” animation. Further, the animation space element after-moving animation execution means (120 in FIG. 1) described above displays the element displayed by the above-described animation animation element display movement animation execution means at a predetermined position within the frame of the same movie playback player. This is used when disappearing or moving a display element outside the frame of the moving image playback player to a predetermined position within the frame to make it disappear (502 and 501 in FIG. 10).

  In order to display an element in the frame of the video player, the moving image space element moving / disappearing animation executing means also displays the “four features” shown in the description of the moving space element displaying moving animation executing means described above. "Is required.

  The fifth feature of this animation space element annihilation animation execution means is that, as the name of this means, has the above four characteristics, and after moving the element, the element disappears. . It does not mean that it disappears as soon as this movement is finished, but this movement is finished, and then it may disappear due to a stop state.

  In this movement, JavaScript or jQuery (102 in FIG. 1) is used, for example, the position after movement of the display element is designated by CSS, or the movement distance is designated by up / down / left / right movement. I will let you. A feature of this movement is that the movement is performed from outside the frame of the moving image player.

  The sixth feature of the animation space element moving and disappearing animation executing means is that, as described in claim 1 of the present invention, the animation by this means is sent from the animation start issuing section (117 in FIG. 1) according to the animation player state. It is the target of the issued order. As a result, as described above, the animation can be synchronized with the start, stop, pause, and restart of the video that is played back by the video player. It is possible to link the contents.

  In FIG. 1, “animation” denoted by reference numeral 121 indicates an animation executed only outside the frame of the video playback player of the web page described in claim 1, and is performed by the moving animation execution means after displaying the video space element described above. Similar to the animation (119 in FIG. 1), it refers to an animation that is related to the animation start instruction unit (117 in FIG. 1) according to the state of the moving image playback player and is linked to the playback of the moving image playback player. As an example of this animation, if you want to add subtitles to a video to be played on the video playback player that is not automatically played when you open the video embedded web page, characters will be displayed if you add subtitles to the video itself. Since it may become smaller, it is preferable to animate text or images with characters as subtitles under the frame that is outside the frame of the video player.

  In FIG. 1, the countdown timer 122 is controlled by the above-described animation start instruction unit (117 in FIG. 1) according to the moving image playback player state, in the same manner as the “preset” animation. For this reason, when the start button of the video player is clicked or tapped for the first time, the countdown timer matches the time progress of the reference timer (118 in FIG. 1).

  Further, the countdown timer is a moving animation execution means after moving image space element display (FIG. 1) in the same manner as the processing performed by the moving image playback player state animation start issuing unit (117 in FIG. 1) at the timing when the countdown is completed. 1 119), animation by moving image space element moving and disappearing animation execution means (120 in FIG. 1), or animation (121 in FIG. 1) can be commanded, and animation start command for each animation player state is issued. A preset animation can be executed in the same manner as the unit (117 in FIG. 1).

  As a specific example of the countdown timer, it can be displayed as 200 in FIG.

  Note that the data (102 to 104 and 107 in FIG. 1) that is the basis of the web page created by the present invention is prepared as a plug-in such as WordPress and the data is uploaded to a storage medium denoted by reference numeral 101. This is convenient.

  Next, in FIG. 2, a Web server device denoted by reference numeral 001 is a block diagram showing a form of a general web server device before uploading data according to the present invention, an arithmetic unit denoted by reference numeral 002, an output unit denoted by reference numeral 003, The communication unit is denoted by reference numeral 004 and the input unit denoted by reference numeral 005.

  Next, as an embodiment of the present invention, in order to make it easy to understand the flow of creation of a moving image embedded web page, the steps of the method of creating data of a moving image embedded web page to be uploaded to a web server device are particularly compatible with multi-devices. The steps of the method will be described using the flowchart of FIG.

  In FIG. 3, in step S101, first, without considering the multi-device support, the screen size of the device is set as one, and for example, a video embedded web page including the animation for the desktop is created. Of course, the screen size for the desktop is not intended here, but the screen size of the tablet terminal or other sizes can also be targeted. What is important is that in step S101, a web page is first created without worrying about multi-device support.

  Next, in FIG. 3, in step S <b> 102, it is determined whether or not the moving image embedded web page including the animation created in step S <b> 101 corresponds to (pseudo) responsive web design.

  As mentioned above, “pseudo” is the main concept that supports responsive web design, which includes fluidity and proportionality as opposed to fixed-width layout. For this reason, in the responsive web design, it is recommended to use a percentage as a unit relative to the width value.

  However, in the present invention, in order to make each animation described above compatible with multiple devices, the above-mentioned “fixed width layout” is used for the basis for displaying elements such as the HTML body and wrapper. The application is not excluded. The reason is that the use of the “fixed-width layout” saves a lot of time in order to make a dynamic animation using JavaScript or jQuery compatible with multiple devices.

  In the present invention, the application of the “fixed width layout” to the body, wrapper, etc. is not excluded, but this is used, but other than this is the same as the creation method by the responsive web design. So here we call it (pseudo) responsive web design.

  In the case of not supporting (pseudo) responsive web design, the process proceeds to step S107 in FIG. 3, and the video embedded web page data including the animation created in step S101 is uploaded to the web server. On the other hand, in FIG. 3, when the moving image embedding type web page created in step S101 is made to correspond to (pseudo) responsive web design, the process proceeds to step S103.

  In FIG. 3, in step S103, processing specific to responsive web design is performed. The process is, for example, putting a viewport meta tag like the image shown in the next paragraph in the head of HTML. This is for setting the display area. For example, if nothing is set on the smartphone, this description is used to display the entire web page created according to the screen size such as the desktop as it is. Is required.

  Next, also in step S104 in FIG. 3, processing specific to responsive web design is performed. In addition to applying a liquid layout like the image below to the container elements, images, and videos of web pages that have already been created, the processing includes values such as width that are properties that indicate the size of each image's CSS as well. % Is used.

  As described above, the “fixed width layout” is not excluded but is used. However, a liquid layout is applied to a container element, an image, and a moving image of a web page. The liquid layout is also applied to what will be created. In particular, when the display element is an element popping out from the moving image playback player and popping out while enlarging, the liquid layout is applied and popping out while enlarging gives the animation a reality. If the “fixed-width layout” is applied to the body, wrapper, etc., it seems unnecessary to apply the liquid layout, but the liquid layout is also applied to bring out the reality to the pop-up. An example of the liquid layout is the image shown in the next paragraph.

  Next, in FIG. 3, in step S105, the entire CSS is handled for each device size. In accordance with the above-mentioned “Responsive Web Design, the method of creating a web page by providing the same HTML with a single URL to all devices and using CSS to change the design for each device” Set the “branch point of screen size” and adapt the design using CSS for each screen size range of the device.

  The CSS created here may be externalized using a link tag as described above, or may be directly written in HTML. And CSS can be written together in a single file, or it can be written separately for each device screen size as shown above.

  Next, in FIG. 3, in step S106, the above-described JavaScript for each animation is dealt with for each device size as in the case of the CSS. This will be described with reference to a flowchart in FIG.

  Currently, responsive web design has been widely adopted worldwide to make web pages “multi-device compatible”. As mentioned earlier, responsive web design is a technique that provides the same HTML with a single URL and uses CSS to change the design for each device to create a web page. There are significant benefits depending on the device.

  However, one of the biggest drawbacks of the responsive web design is that it is necessary to perform the process of step S106. Therefore, the present invention does not exclude applying the “fixed width layout” to the body, wrapper, etc., in order to simplify the process of step S106.

  Finally, in FIG. 3, in step S107, data for which the above-described JavaScript for each animation has been handled is uploaded to the Web server.

  Next, as an embodiment of the present invention, in FIG. 4, steps of a method for making JavaScript correspond to multiple devices will be described using a flowchart in order to make the flow easy to understand. In this flowchart, a branch point is provided in accordance with the “branch point of the screen size of the device” for the JavaScript constituting each animation described in the section “Means for Solving the Problems”. Then, using this branch point, a creation step corresponding to the (pseudo) responsive web design will be described.

  First, in FIG. 4, in step S201, it is checked whether the screen size width of the device is 1401 px or more. If the screen size width of the device is 1401 px or more, the process proceeds to step S202. The JavaScript that composes the animation is adapted to the CSS design with a device screen width of 1401px or more. At this time, conditional branching should be performed in the unit of the screen size of the device in JavaScript. By performing this conditional branching, the position and movement of the animation are adapted to each CSS design. On the other hand, if the width of the screen size of the device is not 1401 px or more, the process proceeds to the next step S203.

  Next, in FIG. 4, in step S203, it is checked whether the screen size width of the device is not less than 1024 px and not more than 1400 px. If the device screen size width is not less than 1024px and not more than 1400px, the process proceeds to step S204, and JavaScript composing the animation is adapted to the CSS design where the device screen width is not less than 1024px and not more than 1400px. On the other hand, if the screen size width of the device is not 1024 px to 1400 px, the process proceeds to the next step S205.

  Finally, in step S205 and step S205 in FIG. 4, the same process as step S203 is performed for each step.

  Next, in FIG. 4, in step S209, JavaScript composing the animation is adapted in accordance with the CSS design whose device screen width is 479px or less.

  The above is the description of FIG.

  Next, in FIG. 5, a step of creating a moving image of a moving image embedded web page and an element (soccer ball) displayed on the moving image will be described. Here, as shown in FIG. 8, a soccer player kicks a soccer ball and the ball appears to jump out of the video will be described. The message board shown in FIG. 9 jumps out of the movie and is created in the same step.

  First, in step S301 in FIG. 5, a moving image (A in FIG. 8) to be played by the moving image playback player (301 in FIG. 8) of the embedded video page is prepared. The content of the moving image is prepared by photographing the kicking of the soccer ball even though there is no soccer ball. For example, a moving image with a moment like the image shown in the next paragraph is prepared.

  Next, in FIG. 5, in step S302, the moving image prepared in step S301 is uploaded to the Web server. At this time, the Web server may be a rental server or a video sharing service, in addition to those managed by itself. Here, the moving image is uploaded to a Web server prepared by the moving image sharing service.

  Next, in step S303 in FIG. 5, the unique ID (Video ID) of the video uploaded to the Web server prepared by the video sharing service in step S302 is grasped. The image shown in the next paragraph is the image used in the description of the moving animation execution means (119 in FIG. 1) after displaying the moving image space element, but the ID is displayed in a blackened portion of the lower image. Enter this ID. In this case, in the code relating to the moving image player, the value (value) of the window mode (wmode) of the parameter (parm), which is the first of the “four special colors”, is “transparent”. "wmode = transparent" must be included. For example, in the image shown in the next paragraph, these are described by adding them directly into the video player code. By doing so, CSS Z-index works for display elements that overlap with the moving image, and preparation for displaying the elements on the surface of the moving image is possible.

  In the upper image, “autoplay = 0”, which means that the moving image is not automatically reproduced. If automatic playback is performed, the above “autoplay = 0” should be set to “autoplay = 1”. Of course, these may be described in JavaScript.

  Next, in FIG. 5, in step S304, an element (display element) displayed on the moving image is prepared. Here, in addition to images with the extension .jpg, transparent images with a background color of .png, or soccer balls and other balls with a rotating .gif are used as the display elements. Then reality comes out. Or, if you want to apply a moving object to the image as the display element, use a transparent background color with a .gif extension.

  For example, it is used when it is desired to use a moving person or avatar as the display element as shown in FIG. Once the image is ready, use the img tag to display the image and embed the image in the HTML. As described above, when a rotating soccer ball with a transparent background color with a .gif extension is prepared, the subsequent step S307 becomes unnecessary.

  Next, in FIG. 5, in step S305, the image embedded in the HTML in step S304 is surrounded by a div tag or the like, and an id attribute or a class attribute is designated in order to associate with the CSS in the tag. Here, the image shown in the next paragraph is set as an example.

  Next, in step S306 in FIG. 5, the soccer ball set in step S305 is adjusted and set by CSS using the above id attribute so that the soccer ball set in step S305 can be displayed at an arbitrary position in the video player. The content described in the image shown in the next paragraph is an example. By doing this, the values of top and margin-left are changed so that it can be displayed at an arbitrary position in the moving image playback player.

  Next, step S307 in FIG. 5 is applied when the background of the ball image is not transparently processed in step S304. When the transparency process is not performed, a square is displayed on the moving image, and a ball is displayed in the rectangle. For this reason, the soccer ball does not appear to be integrated with the video below. In step S307, the id attribute is used to remove the square portion around the ball using CSS. A specific example is the image shown in the next paragraph. As shown below, an image of a soccer ball can be projected while gradually expanding by expressing the width as a percentage (%) as a liquid layout. At this time, when the width is expressed as a percentage (%), the initial display ratio from the original size of the image should be smaller than 100%.

  Next, in step S308 in FIG. 5, the id attribute is used to associate an animation code by JavaScript or jQuery with the image of the soccer ball so that the soccer ball can be animated.

  Next, in FIG. 5, in step S309, the time slider (303 in FIG. 8) and display are displayed for the time displayed on the video player based on the reference timer at the moment of kicking the soccer ball with the video. We grasp this based on time. This is because, as described above, in the present invention, it is possible to synchronize the elapsed time of the reference timer with the progress time of the animation displayed on the surface of the moving image.

  Next, in step S310 in FIG. 5, using the id attribute, the soccer ball is moved to a position where the soccer ball is kicked or made to appear before the time grasped in step S309. In the embodiment of the present invention, the soccer ball falling from above bounces greatly and then bounces finely so as to go to the position where the soccer ball is kicked.

  Finally, in FIG. 5, in step S <b> 311, JavaScript and jQuery are set so that the soccer ball moves and jumps using the id attribute at the time grasped in step S <b> 309. The movement method of popping out is as described above.

  The above is the description of FIG.

  Next, FIG. 6 is a flowchart illustrating processing steps according to the moving animation execution unit after moving image space element display according to the embodiment of the present invention.

  First, in step S401 in FIG. 6, a determination is made as to whether or not there is a command from the animation start issuing unit for each moving image playback player state. If there is this command, the process proceeds to the next step S402, and if there is no such command. Results in no animation of the display elements within the frame of the video player.

  Next, in step S402 in FIG. 6, upon receiving the command, the element appears on the surface of the moving image to be played back by the moving image playback player. Or, like the source code of an embodiment of the present invention described later, the display element appears on the surface of the moving image played by the moving image playback player while moving.

  Next, after that, in step S403 in FIG. 6, it is determined whether or not the display element is to be kept stopped on the surface of the moving image played back by the moving image playback player. Proceeds to the next step S404, and proceeds to step S405 if the stopped state is not maintained.

  Next, in FIG. 6, in step S404, a process is performed in which the display element maintains a stopped state on the surface of the moving image played by the moving image playback player, and the process proceeds to the next step S405.

  Finally, in step S405 in FIG. 6, a process is performed in which the display element moves from the frame of the moving image playback player to the outside of the frame.

  Next, FIG. 7 is a flowchart showing processing steps according to the moving image space element disappearance animation executing means according to the embodiment of the present invention.

  First, in FIG. 7, in step S501, it is determined whether or not there is a command from the animation start issuing unit for each state of the moving image playback player. If there is this command, the process proceeds to the next step S502. Results in no animation of the display elements within the frame of the video player.

  Next, in FIG. 7, in step S502, a process is performed in which an element displayed outside the frame of the video player is moved into the frame.

  Next, after that, in FIG. 7, in step S503, it is determined whether or not the element maintains the stopped state on the surface of the moving image to be played back by the moving image playback player. The process proceeds to the next step S504, and if the stopped state is not maintained, the process proceeds to step S505.

  Next, in FIG. 7, in step S504, a process is performed in which the element maintains a stopped state on the surface of the moving image played back by the moving image playback player, and the process proceeds to the next step S505.

  Finally, in step S505 in FIG. 7, a process is performed in which the element disappears or fades out within the frame of the moving image playback player.

  Next, a method of creating the moving image embedded web page in FIG. 8, particularly how to create the moving image and elements to be displayed on the surface of the moving image will be described.

  In FIG. 8, regarding the method of creating a moving image or the like, the soccer player with the symbol “B, 201” in FIG. 8 is made into a live-action photograph from the beginning, or the soccer player is separately photographed using a chroma key or the like. There is a method of creating whether to synthesize only the extracted soccer player's video and the background video, or to animate on the web instead of the video.

  On the other hand, with respect to the soccer ball of “C, 202” in FIG. 8, there is a creation method of using a live action or using animation on the web instead of moving pictures. In the case of live action, it is necessary to replace the animation on the web later.

  In FIG. 8, the animation element of the soccer ball moves using the moving image space element appearance execution means denoted by reference numeral 119 in FIG. It is as follows. A soccer ball appears at the position of reference numeral 202 using JavaScript or JQuery (102 in FIG. 1), or a soccer ball at another position is moved to the position of reference numeral 202. Similarly, using JavaScript or JQuery (102 in FIG. 1), the soccer ball is moved from the position 202 to the position 206 while being enlarged. In the source code of an embodiment according to the present invention to be described later, the soccer ball bounces from the top and bounces greatly, and then bounces in small increments. A process is described in which the soccer player reflected in the video kicks the soccer ball at the moment when the bounce ends, and the soccer ball moves while expanding from the 202 position to the 206 position.

  Next, a method for creating the embedded video page of FIG. 9 will be described, particularly how to create a moving image and elements to be displayed on the surface of the moving image. This moving image embedding type web page creation method is similarly applied to FIGS. 1 to 4 and FIGS. 6 and 7. On the other hand, the outline of FIG. 5 may be referred to.

  In FIG. 9, reference numerals 402 and 403 may be images like the soccer ball whose creation method is shown in FIG. 8, but can also be displayed in CSS and text.

  When it is desired to emphasize the contents written on the message board of reference numeral 402 in FIG. 9 while attracting the viewer's attention and giving an impact, the message board of the same 402 is displayed using the moving animation execution means after displaying the elements. It is good to make it jump out while expanding to the position of 403 and rotating. In the source code of the embodiment according to the present invention to be described later, the setting is made so that the message board expands and jumps out while rotating. However, at the time of filing of the present invention, only a part of browsers cannot be rotated, and only enlarged while moving.

  In addition, for the application button indicated by reference numeral 405 in FIG. 9, a link to the application form may be entered. Alternatively, a form may be provided in the message board 403. Alternatively, a moving image may be put in the message board 403. In this case, the moving image jumps out of the moving image. The message board 403 itself may be a moving image, and in this case, the moving image pops out from the moving image.

  In this way, the message board describing what the user wants to appeal the most while attracting the attention of the viewer is expanded, so that the above-mentioned problem with the conventional technique (Patent Document 1) can be solved.

  In the source code of the embodiment according to the present invention described later, the message board denoted by reference numeral 403 in FIG. 9 is set to disappear after a certain time. In this way, it is possible to appeal scarcity and urgency to the viewer. In this case, if a message about a campaign such as a time sale is written in the message board 402 and the message board 403 in FIG. 9, the click rate is expected to be remarkably improved. Similarly, if a limited quantity campaign is described, the click rate is expected to improve dramatically.

  For the symbol D in FIG. 9, a commercially available software that can prepare a photograph of a person or an avatar and can speak to the voice data just by setting the position of the eyes and mouth on the photograph or illustration, You may create and use animations that speak. Thereafter, the animation may be combined with the animation of the symbol A in FIG. By doing so, it is possible to realize the same as the conventional technique (Non-Patent Document 1) in general, and at a low cost. At this time, the voice to be spoken may be included in the video of A, or a voice player may be prepared separately.

  Next, a method for creating the embedded web page of FIG. 10 will be described, in particular, how to create a moving image and elements to be displayed on the surface of the moving image. This moving image embedding type web page creation method is similarly applied to FIGS. 1 to 4 and FIGS. 6 and 7. On the other hand, the outline of FIG. 5 may be referred to.

  In FIG. 10, reference numeral 402 may be an image similar to the soccer ball whose creation method is shown in FIG. 8, but can also be displayed in CSS and text.

  The narrator and avatar of reference numeral 501 in FIG. 10 necessary for explaining the contents of the movie in an easy-to-understand manner are displayed and the contents written on the message board of reference numeral 402 in FIG. 10 are emphasized. In order to enlarge the message board, the narrator or avatar at the position 501 may be moved to the position 502 by using the movement animation execution means after element display described above.

  Further, as described above, this may be processed by commercially available software so that the background becomes transparent as a moving image to be played by a flash player without a border, and moved from the moving image playing player. .

  By doing so, it is possible to solve the above-mentioned problem that the conventional technique (Patent Document 1) has.

  As with the symbol D in FIG. 9, a photograph or avatar of a person is prepared for the symbol D in FIG. 9, and it is possible to speak according to the audio data simply by setting the position of the eyes and mouth in the photograph or illustration. You can create and use a talking animation using commercially available software. Thereafter, the animation may be combined with the moving image indicated by symbol A in FIG. By doing so, it is possible to realize the same as the conventional technique (Non-Patent Document 1) in general, and at a low cost. At this time, the voice to be spoken may be included in the video of A, or a voice player may be prepared separately. The above is the third embodiment.

  Next, FIG. 11 is an example of a script for creating a video embedded web page according to the present invention, and a list of the relationship between the animation playback time of the video embedded web page and the animation, etc., in an easy-to-understand manner. It is.

  As described above, when a moving image is prepared first and the reproduction elapsed time of the moving image and the point in time when the animation is desired to be started are created, it is easy to create a moving image embedded web page according to the present invention.

  Next, in the database denoted by reference numeral 108 in FIG. 1, as shown in FIG. 12, for example, the number of accesses to the link destination page of the button in FIG. 9, the number of departures from the access destination page, or the departure rate is calculated. Further, as shown in FIG. 13, the number of passages and the passage rate of the linked pages, and further, the transition destinations from the linked pages are tabulated and recorded. Furthermore, as shown in FIG. 14, in the database, when the linked page includes, for example, a purchase or participation application page, the number of purchases or participation is totalized and recorded. Is done. Therefore, the access tendency of the viewer or the web page viewer is grasped from the access data.

  This makes it possible to reflect the tendency of interest of viewers or web page viewers on the web page, and to provide a video or video embedded website that meets the demands of viewers or web page viewers. It becomes possible. Alternatively, it is possible to create a video or video embedded website that guides the interest of the viewer or web page viewer in the direction intended by the creator.

  Furthermore, by sending the URL of the video-embedded website created in this way to an e-mail attached to the business in advance, the company's products can be effectively presented. Efficiency of sales activities.

  As described above, the source code as an embodiment of the present invention is disclosed below. In this example, both the soccer ball of Example 1 and the message board of Example 2 are incorporated.

  First, the configuration of the file including the source code will be described. The appearance of the folder or file before uploading to the server denoted by reference numeral 100 in FIG. 1 looks like the image shown in the next paragraph.

  First, the CSS folder in the image above is as shown in the next paragraph. The contents of the source code of style-note-pc.CSS will be disclosed later on behalf of the five CSS files of this image. These five files correspond to the one described in the media query above, with the CSS file externalized and the link tag set in the HTML head.

  Next, the images folder above shows the image shown in the next paragraph. The boll.gif is displayed within the frame of the video player, and the source code disclosed later uses a rotating three-dimensional soccer ball. Here, the soccer ball background is not transparently processed as an image in order to save time, but the background is cut out using the circular display of CSS, and the background is made transparent so that it remains circular on the video. I am letting. The “Click here for details” button in the next paragraph uses a general image button and links to it using HTML. Similarly, tobidashi-1 and tobidashi-2, which are the last images in the next paragraph, are popped out of the video player and expanded while rotating around the Y axis as a component of the message board. However, at the time of filing of the present invention, some browsers do not rotate and are only enlarged. These two images are displayed in the same image by switching only the character portion of the content screamed by the woman and switching the image when the mouse is put on the image. In addition, a link is set in this image in order to perform a call to action.

  Here, in place of the boll.gif, when using an image of an avatar or a narrator moving with an extension of .gif, for example, the following may be performed. Once this image with the extension of .gif is decomposed into a still image and transparently processed in the background, and once again integrated and processed as a moving image with the extension of .gif, it will be in the video player. It is also possible to make a person projected in the video to be played pop out from the video player. Also, in this case, the video is not played as an image with a .gif extension, but as a video to be played on a flash player without borders, and is processed with commercially available software so that the background becomes transparent, and then jumps out of the video player You may do it.

  Next, inside the above js folder is the image shown in the next paragraph. The animation-runner.js, count-down-timer.js, script.js, tobidashi.js, and youtube-publisher.js will be disclosed later. The remaining iframe_api.js, jquery.pause.min.js, and jquery-1.8.3.min.js are publicly available on the Internet, so their link destinations are shown in a later paragraph. Note that when using jquery-1.9 or later version, the contents of jquery-1.9 or later version are greatly changed compared to the previous jQuery, so simply using this will rotate the popped out element. Attention is necessary because it does not rotate.

  Next, as described above, since iframe_api.js, jquery.pause.min.js, and jquery-1.8.3.min.js are published on the Internet, their link destinations are indicated.

  Then, as described above, the source code is disclosed for the fourth embodiment of the present invention. First, the source code of Table 1 shown in the next paragraph is that of index.html above.

  The source code of Table 2 shown in the next paragraph is style-note-pc.css in the above CSS folder. Other CSS folders are omitted because they can be inferred from the contents of this style-note-pc.css.

  The source code of Table 3 shown in the next paragraph is from the above animation-runner.js.

  The source code of Table 4 shown in the next paragraph is that of count-down-timer.js above.

  The source code of Table 5 shown in the next paragraph is that of script.js above.

  The source code of Table 6 shown in the next paragraph is that of tobidashi.js above.

  The source code in Table 7 in the next paragraph is from youtube-publisher.js above.

  In general, sales on the Internet are obtained by multiplying the number of accesses (a) by the contract rate (b) and multiplying this by the unit price of the product or service. The moving image-embedded web page according to the present invention may incorporate something not in the prior art, and can first surprise the viewer. Therefore, it is topical. As a result, the number of accesses (a) is increased. Further, since call-to-action is performed by combining animation content and animation with high appeal and persuasive power, the contract rate (b) and conversion rate on the web page can be improved. Therefore, sales can be expected to increase on websites operated by companies and individual business owners. Further, by sending the URL of the video embedded website for presentation (FIGS. 8 to 11) created by the present invention to an e-mail and sending it to the sales office, the business of the sender company can be made more efficient. Rather, the time taken for sales representatives to be constrained by salesman visits is reduced, and corporate activities can be made more efficient across society.

001 Web server device outline 002 arithmetic unit 003 output unit 004 communication unit 005 input unit 006 storage unit 010 local terminal for upload 021 network 022 network 023 network 030 video distribution Web server device (when using video sharing service, etc.)
040 User terminal 100 Web server device 101 Recording medium 102 101 JavaScript or JQuery
HTML out of 103 101
104 out of 101 CSS
105 out of 101 images 106 out of 101 videos (uploading videos without using the video sharing service)
107 out of 101 PHP
108 Database 109 CSS Screen Size Conditional Branch Selection Unit 110 JavaScript Screen Size Conditional Branch Selection Unit 111 Device Table 112 Request Processing Unit 113 Device Size Acquisition Unit 114 Response Processing Unit 115 Display Unit 116 Video Playback Player Information Processing Unit 117 Animation start issuing section 118 Reference timer 119 Moving animation execution means after moving image space element display 120 Moving animation execution means after moving image space element movement 121 Animation (animations other than those executed in 119 and 120)
122 Countdown timer 200 Countdown timer (where the countdown animation takes place)
201 Avatar as an animation element on a web page 202 Soccer ball as an animation element on a web page (appearance place)
203 Soccer ball as animation element on web page
204 Soccer ball as an animation element on the web page (2 in the middle of movement)
205 Soccer ball as animation element on web page
206 Soccer ball (final position) as an animation element on a web page
301 Movie playback player 302 Pause button 303 Time slider 401 Narrator or avatar serving as an animation element on a web page 402 Message board displayed in a movie 403 Moving from position 402 in FIG. 9 to position 403 Animated or moved while magnifying, animated to animate, or rotated and moved while magnifying the message board 404 Message in the message board 405 Go to the application form web page Application button 501 including the link of 501 Narrator or avatar to be an animation element on the web page displayed within the frame of the video playback player 502 Displayed outside the frame of the video playback player, Narrator or avatar to be an animation element on a web page 601 Elapsed playback time and animation start time 602 601 on a web page id attribute (or to specify an animation element in time series corresponding to 602 601 class attribute) element name and put in HTML div tag 603 Describes the number of seconds until the animation disappears from the time of 601 indicating the animation start time 604 After the animation appears When moving, the direction of movement is described. 605 The outline of which position appears at the animation start time of 601. Also, in preparation for hiding of elements when the number of overlapping elements increases, z-index representing overlapping elements is described with the z in front and the numerical order of overlapping 606 Animation elements can be identified immediately A. Movie taken B B Football player actually shot in A or a football player synthesized later on A using a chroma key. Although the same thing as this soccer player is shown, the code | symbol 201 of FIG. 8 is not image | photographed as a moving image, but becomes a soccer player or avatar used as an animation element on a web page. A soccer ball synthesized later to A using a soccer ball or a chroma key, or a combination of both of them replaced in the middle. D A narrator actually photographed in A or a later using a chroma key to A Web page to embed synthesized Narrator α video

Claims (10)

  There is a web server device in which HTML information, CSS information, and JavaScript information are uploaded, and the web server device includes all or part of a calculation unit, a communication unit, an input unit, a storage unit, and an output unit, A video playback player state-specific animation start issuing unit that issues a preset command according to the state of the video playback player for the video playback player that is output by the web server device and displayed on the browser of the user terminal, and further configured by the information The animation by the moving animation execution means after moving image space element display, the animation by the moving animation execution means after moving image space element, the animation other than those displayed by these two means, and the countdown timer In addition, all or a part of the countdown animation is provided, and when the video playback is started by the video playback player, a reference timer is started from the outside, or the reference timer starts from the start of the playback. In the web server device having the above contents, the moving image reproduction is performed by the moving animation execution unit after moving image space element display set to correspond to the elapsed time from the reproduction start of the moving image reproduced by the moving image reproduction player. On the web page, the element displayed at a position inside the frame where the player is displayed is outside the frame where the video player is displayed from a position inside the frame where the video player is displayed. To create an embedded video web page characterized by moving to the location of .   In the web server device, a frame in which the moving image playback player is displayed by moving animation execution means after moving image space element display set to correspond to an elapsed time from the start of playback of the moving image played by the moving image playback player. The element displayed at the position on the inside of the image is expanded from the position on the inside of the frame on which the video playback player is displayed to the position on the web page on the outside of the frame on which the video playback player is displayed. A method for creating a video-embedded web page, which moves while moving.   2. The web server device according to claim 1, wherein the animation space element moving and disappearing animation execution means set so as to correspond to the elapsed time from the start of reproduction of the moving image reproduced by the moving image reproduction player is provided. The element displayed at the position on the web page outside the frame where the video playback player is displayed is the position of the video playback player from the position on the web page outside the frame where the video playback player is displayed. A moving image embedded web page creation method, wherein the moving image player moves to a position inside the displayed frame and then disappears inside the displayed frame.   The video playback player according to claim 1, when the playback of the video played by the video playback player according to claim 1 is paused, the time progress of the reference timer is also paused, and the video playback player according to claim 1 When animation playback is paused and the status of the video playback player changes, the animation by the moving animation execution means after moving image space element display according to claim 1 is executed by the animation start issuing unit for each video playback player state described above. In the web server device in which the progress of all or part of the countdown animation of the countdown timer is paused, the animation by the animation space element moving and disappearing animation executing means, the animation other than those displayed by these two means, Playback player The animation of a paused animation is resumed in addition to the time progress of the reference timer being resumed when the reproduction of a movie to be reproduced is resumed. 4. A method for creating a video embedded web page according to any one of 1 to 3.   In the web server device according to claim 1, when the setting of the video playback player according to claim 1 is set so that automatic video playback is not performed, the start button of the video playback player is clicked for the first time or first time. When tapped, the progress of the time of the reference timer described in claim 1 is started, and the state of the video player changes from the stopped state to the initial playback state, and the change is the starting point. The animation start instruction unit according to the moving image playback player state according to item 1, the animation by the moving animation execution unit after moving image space element display, the animation by the moving animation execution unit after moving image space element according to claim 1, Animations and counts other than those displayed by the above means How to create videos embedded web page according to any one of claims 1 to 4 in which the progress of all or part of the down timer countdown animation and wherein the starting.   When the web server device according to claim 1 is set so that automatic playback is not performed according to the setting of the video playback player according to claim 1, starting of the reference timer according to claim 1 and video Starting animation by moving animation executing means after displaying space element, starting animation by moving animation executing means after moving space element, starting animation other than those displayed by these two means, starting countdown animation of countdown timer The video embedded web according to any one of claims 1 to 4, wherein all or a part of the video is executed starting from the fact that the web page according to claim 1 is scrolled by a predetermined value. How to create a page.   Video playback player that includes uploaded HTML information, CSS information, and JavaScript information, and includes all or part of a calculation unit, communication unit, input unit, storage unit, and output unit, and is displayed on the browser of the user terminal A video playback player state-specific animation start issuing unit that issues a preset command according to the state of the video playback player, and when the video playback player starts playback of the video, the time progresses from this A recording that includes a reference timer that starts, and that is constituted by the information and that is the target of the command, is recorded as a program for causing the computer to execute the animation for the animation performed by the moving animation element after moving image space element display A medium is provided in the storage unit, and the above In addition, for the animation by the moving animation execution means after displaying the moving image space element described above, the element displayed at a position inside the frame in which the moving image playback player is displayed is the frame in which the moving image playback player is displayed. From the position on the inside to the position on the web page outside the frame on which the video player is displayed, and as described above, the recording recorded as a program for causing the computer to execute the animation A web server device comprising a medium in the storage unit.   Video playback player that includes uploaded HTML information, CSS information, and JavaScript information, and includes all or part of a calculation unit, communication unit, input unit, storage unit, and output unit, and is displayed on the browser of the user terminal A video playback player state-specific animation start issuing unit that issues a preset command according to the state of the video playback player, and when the video playback player starts playback of the video, the time progresses from this A recording that includes a reference timer that starts, and that is constituted by the information and that is the target of the command, is recorded as a program for causing the computer to execute the animation for the animation performed by the moving animation element after moving image space element display A medium is provided in the storage unit, and the above In addition, with regard to the animation by the moving animation executing means after displaying the video space element, the element displayed at the position inside the frame where the video playback player is displayed is inside the frame where the video playback player is displayed. From the position to be moved to the position on the web page outside the frame in which the video player is displayed. When the playback player's pause button is clicked or tapped, it enters a paused state, and then when the playback of the video played on the video playback player is resumed, the progress of the animation is resumed. Computing the animation and the progress Web server device characterized by comprising a recording medium storing a program to be executed by the storage unit.   Video playback player that includes uploaded HTML information, CSS information, and JavaScript information, and includes all or part of a calculation unit, communication unit, input unit, storage unit, and output unit, and is displayed on the browser of the user terminal A video playback player state-specific animation start issuing unit that issues a preset command according to the state of the video playback player, and when the video playback starts in the video playback player A recording medium comprising a timer and recorded as a program for causing a computer to execute the animation for the animation by the moving animation execution unit after moving image space element display, which is configured by the information and is the target of the instruction Prepare for the storage unit In addition, for the animation by the moving animation execution means after displaying the video space element, the element displayed at the position inside the frame where the video playback player is displayed is inside the frame where the video playback player is displayed. To the position on the web page that is outside the frame in which the video player is displayed, and the animation by the moving animation execution means after the video space element is displayed, A web server device, which is started when a start button is clicked or tapped for the first time, and has a recording medium recorded as a program for causing a computer to execute the animation as described above, in the storage unit.   The web server device according to any one of claims 1 to 9, wherein a CSS screen size condition branch selection unit including a media query for switching CSS corresponding to a screen size of the device, and a width of a layout by using the media query. In order to match the position of the display element that animates to the web page that has changed, it has a JavaScript screen size conditional branch selection part that includes a conditional expression to correspond to the screen size of the device, and various sizes of user terminals A recording medium recorded as a program for returning the corresponding data to the device and for causing the computer to execute it so as to display a pre-designated video embedded web page. Web server device.

Images