WO2022028946A1 - Ergonomic display of promotional video content - Google Patents

Ergonomic display of promotional video content Download PDF

Info

Publication number
WO2022028946A1
WO2022028946A1 PCT/EP2021/070956 EP2021070956W WO2022028946A1 WO 2022028946 A1 WO2022028946 A1 WO 2022028946A1 EP 2021070956 W EP2021070956 W EP 2021070956W WO 2022028946 A1 WO2022028946 A1 WO 2022028946A1
Authority
WO
WIPO (PCT)
Prior art keywords
video
height
page
editorial
content
Prior art date
Application number
PCT/EP2021/070956
Other languages
French (fr)
Inventor
Romain Parent
Original Assignee
Sublime Skinz Labs
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Family has litigation
First worldwide family litigation filed litigation Critical https://patents.darts-ip.com/?family=73643027&utm_source=google_patent&utm_medium=platform_link&utm_campaign=public_patent_search&patent=WO2022028946(A1) "Global patent litigation dataset” by Darts-ip is licensed under a Creative Commons Attribution 4.0 International License.
Application filed by Sublime Skinz Labs filed Critical Sublime Skinz Labs
Publication of WO2022028946A1 publication Critical patent/WO2022028946A1/en

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04803—Split screen, i.e. subdividing the display area or the window area into separate subareas

Definitions

  • This application relates generally to the field of ergonomic display on a screen of promotional video content, in particular of an advertising nature, simultaneously with editorial content, in particular of an informational nature.
  • the present application relates to the simultaneous display on an interactive screen, in particular touch screen, in a page, of a first video content or video banner and of a second content which may exceed the size of the page in the display screen, in response to events captured by the screen or via the control of the screen.
  • the invention is particularly suitable for small screens, such as the screens of portable objects, in particular mobile telephones.
  • edge or “end” of a content will be understood to mean the beginning or the end of the content in a memory zone or in any other means representing the content, such as a file or a graphics memory.
  • video content we mean any file describing an animated sequence of images and by editorial content, any digital file, which may contain text, still images, sequences of animated images, such as for example a website.
  • the method comprises a first step A of displaying editorial content, represented by a hatched rectangle.
  • promotional content such as a commercial video v is displayed at the top of the screen, represented by a rectangle including a triangular play button, in a video banner represented by a plain white rectangle, reducing the space for editorial content and preventing its entire display.
  • the solid black rectangle represents the rest of the undisplayed editorial content.
  • the space allocated to the promotional content is reduced until it disappears, represented by a rectangle with dotted edges.
  • the display is not ergonomic: all of the promotional content is displayed only at the start of reading, then only part of the promotional content is displayed until it disappears.
  • the advertising display must take place secondarily when the editorial content is read by a user and can take place predominantly when the user has finished reading the editorial content.
  • the invention offers a solution to the problems mentioned above, by making it possible to display advertising content in an ergonomic way and in particular at the end of the reading of editorial content.
  • the invention relates to a method for displaying a promotional video banner containing a video recorded in a video format, with editorial content, on a page, in a screen, the page extending over a page height from a page top and across a page width, in which the video is displayed maximized, according to the video format, in the video banner, comprising the following steps:
  • Scroll the editorial content by causing a reduction in its display surface, and by decreasing the editorial height for displaying the editorial content from the top of the page;
  • the expression "minimizing a video” will be understood in the sense of reducing the display surface of this video on a page displayed in a screen and "maximizing a video” will be understood in direction to increase the display surface of this video on a page displayed in a screen.
  • the minimization or maximization according to the invention is done by resizing while respecting the original video recording format, i.e. without deformation.
  • “distortion-free” resizing means resizing the video while maintaining its original width-to-height ratio.
  • the display method according to one aspect of the invention may have one or more additional characteristics among the following, considered individually or according to all technically possible combinations:
  • the step of keeping the sum of the video height and the editorial height equal to the page height includes the substeps of:
  • the screen is tactile and scrolling is obtained by touching the screen the screen comprises a page, the page being a window of an operating system and the scrolling is obtained by a pointing device;
  • the display and scrolling are obtained by programming a computer equipped with a graphics card driving the screen; the programming is carried out in “javascript” language;
  • the screen is a computer screen and the scrolling is captured by the javascript “scroll” event;
  • the screen is a mobile phone screen and the scrolling is captured by the javascript "drag" event
  • the invention also relates to a device comprising means for implementing the method according to the invention, and in particular a device comprising a screen, a graphics card and a computer and software means for positioning and scrolling on the screen the editorial content and display the video content on the screen.
  • the invention also relates to a computer program product comprising instructions which, when the program is executed by a computer, lead the latter to implement the method according to the invention.
  • the invention also relates to a computer-readable recording medium comprising instructions which, when executed by a computer, lead the latter to implement the method according to the invention.
  • Figure 1 shows a schematic representation of a commercial video display method according to the state of the art.
  • FIG. 2 represents a page in a screen of a device, the page being divided into a first strip of the same width as the page and a second strip of the same width as the page, with a surface greater than the surface of the first strip.
  • Figure 3 shows a schematic representation of a video content display method according to the invention.
  • Figure 4 shows another schematic representation of the video content display method according to the invention.
  • Figure 5 shows a schematic representation of a step of the video content display method according to the invention.
  • the context of the present application is that of a so-called "outstream" video advertisement, that is to say the case of a video message or advertisement displayed outside editorial content, these two elements sharing during their initial loading part of the useful space of a screen through which they are viewed.
  • These two contents are represented displayed on a screen s of a device in FIG. 2.
  • the screen s represented in FIG. 2 comprises a page p, comprising a video content 1 displayed at the top of the page p and occupying the entire width Lp of page p, and an editorial content 2 displayed at the bottom of page p and also occupying the entire width Lp of page p.
  • the sum of the heights Hv of the video content 1 and He of the editorial content 2 corresponds to the height of the page Hp.
  • the authorization is given by two objective or technical criteria: the presence or the detection in the display screen of at least one end of the editorial content and the detection of a vertical movement of this user-initiated content, to scroll it.
  • the video content or video banner in particular of a promotional nature, increases due to the reduction in the editorial content on the page, by resizing the video, contained in the video banner, to display it without distortion in any the height of the area left free by the editorial content.
  • the resizing of the video in height in the video banner left free during a reduction in the height of display of editorial content from a top of the page is characteristic of the invention and of a rise of a user in editorial content, a priori after reading it or part of it and therefore constitutes a privileged and ergonomic moment for displaying a video message additional to the content.
  • Figure 3 shows a schematic representation of the method according to the invention.
  • step A an editorial banner comprising editorial content is displayed by a screen on a page, the editorial banner being represented by a hatched rectangle.
  • a video content v is then displayed at a step B in a video banner represented by a plain white rectangle.
  • the video content v is represented by a rectangle comprising a triangular “play” button.
  • the video banner has a height Hv and the editorial banner comprising the editorial content has a height He.
  • the invention keeps the sum of the heights of the video banner Hv and of the editorial banner He equal to the height of the page Hp displayed by the screen. This therefore results in an increase in the height Hv of the video strip.
  • the video content v is advantageously displayed without deformation, that is to say while preserving the initial width-to-height ratio of the video. For example, if the user scrolls all the editorial content in the opposite direction to reading, the editorial content may disappear to make way for the video content, the height Hv of the video banner then being equal to the height Hp of the page, as shown in step C.
  • a video height threshold Hv can be predetermined in order to always have a display of the video banner.
  • the condition of at least one end of the content is equivalent to the presence of a single end of the content on the page.
  • the method or process of the invention then comprises increasing the proportion of the page allocated to the advertising message in the opposite direction to the reduction by scrolling of the display surface of the informational content, initiated by the user.
  • an initialization height for example zero pixels in display height
  • the additional video content will go so far as to potentially occupy all of the useful space in height or full height of the page, when the reduction of informational or “editorial” content by scrolling makes it disappear from the screen and in a fluid manner.
  • One of the characteristics of the invention is also that the additional video content is not displayed in a fixed format and progressively discovered during scrolling of the editorial content causing a reduction in its display surface as in the prior art but that it is resized and maximized in height and the video that it contains is clearly displayed on the screen in the displayed page (“viewport” in English).
  • the video banner is resized to the full height left free by reducing the editorial content display area or banner.
  • the video content or video banner is therefore clear in its video part throughout the duration of the increase in its display height, which improves the visual comfort of the user or observer and the display quality, without truncation, and therefore ergonomics.
  • the video message may be minimized, while respecting its recording format, or even not displayed.
  • the message video or video is maximized according to the invention: that is to say that it is displayed maximized, respecting its recording format, in a video banner extending over the entire height left available on the page by the editorial content and the video contained in the video banner is displayed (clear) over a width such that the quotient of the display width and the display height of the video message is equal to the recording ratio or format of the video content , such as 4/3 or 16/9.
  • the message or video for example promotional, can therefore be displayed without distortion on any type of screen or media, such as a mobile telephone, a computer screen or any screen of a mobile device, in addition to the editorial content, during the entire scrolling .
  • Figure 4 shows a schematic representation of the method 3 for displaying video content according to the invention.
  • Method 3 comprises four steps:
  • a third step 33 comprising the scrolling of the editorial content by causing a reduction in its display surface, and by reducing the editorial height He for displaying the editorial content from the top of the page 5
  • the invention can be supplemented by the prior display of the message on a greater height, with reduction during a translation of the text or the content editorial in the direction of reading and by an additional step consisting, in order to avoid black bands on the page on either side of the video displayed, in displaying in the background behind the video displayed according to its format, ie respecting its recording or aspect ratio, the same video displayed across the width of the page with distortion.
  • the invention is therefore compatible with many pre-existing display methods.
  • the choice to display the video banner, containing the video displayed in its maximum format, from a top of the page ("viewport") and to display below the editorial content being minimized makes it possible to fill the potential void left by the editorial content without distorting or distorting the video contained in the video banner, including during the transition of the editorial content to a display of the video content on 100% of the page height or vertical dimension of the page. This results in a display of the video of the banner, in particular promotional, ergonomic because complementary to the editorial display on the screen.
  • the video or video message will span the page to follow the end of the editorial content that is closest to it when scrolling through this content.
  • the post will expand as the top of the content moves down the page.
  • a mobile phone equipped with a touch screen displays a page, in particular in html format.
  • a “javascript” program associated with the html page enables this page to detect an oriented touch applied to the screen by a user.
  • video content is displayed in a video player, on a surface less than or equal to 30% of the surface of the page and according to a first band extending over the entire width of the LP page.
  • the program reacts to "drag up” events by scrolling the content in the sense of a reading of the editorial content by a user or “drag down” by scrolling of the editorial content in the opposite direction to the direction of reading.
  • the video banner is immediately enlarged to the detriment of the editorial content, which is reduced accordingly and the video in this banner is maximized.
  • the video banner is immediately minimized to the advantage of the editorial content, which is enlarged accordingly and the video in this blindfold is minimized.
  • the display of a video in the first banner or video banner can be performed with the greatest clarity, depending on its format, in an area of the first banner that is narrower than the page on a background, in the background, of the same width presenting the distorted and therefore blurred video but covering or occupying the entire width of the page Lp without departing from the teaching of the present invention.
  • the teaching of the present invention extends to a display in a banner of the height left free on the page by an editorial content which is reduced by scrolling, with black bands, possibly unequal on either side.
  • the black bands may be above or below the video in the video banner.
  • the minimized version of the first banner is kept in place and during all the user's touch operations, or in an equivalent way of scrolling the text of the editorial content in the second banner, until the javascript program detects the presence of the start of the editorial content in the second banner, which would be synonymous with a reduction of the editorial banner in display height.
  • This may correspond to an indication per event of a touch direction associated with the opposite direction of the reading direction for the editorial content and a passing of the beginning of the content.
  • the program can consider that the user displaying the beginning of the editorial content and not wishing to read more has returned to the beginning of the reading and wants to see the video content.
  • the page can be used as a window defined by an operating system on a computer screen and an internet browser using the "scroll down” and “scroll up” javascript events of a pointing device such as a mouse, as equivalents of "drag down” and “drag up” in the first mode. Moreover, these "drag” events can be reduced to “scroll” events on certain systems, screens or pages.
  • the effect of the invention is to display from the top of the page over the entire available height the video content and the video in this banner according to its format, as the informational or editorial content induced by scrolling disappears.
  • the sum of the video height of the video content displaying the video according to its format and of the editorial height is therefore kept constant for a display and for a scroll. This sum is always equal or kept equal to the height of the page or page height, to obtain the technical effect of the invention which can be implemented by a computer program, in particular javascript having access to a graphics library .
  • the invention therefore makes it possible, with very simple means, to subordinate the display of video content or video banner, in particular of a promotional or advertising nature and containing a video that is always clearly displayed, to an action explicit from the user indicating objectively and technically a situation in which the reading of a video message, can be displayed maximized in full screen, by means of properties provided by the screen on the position of the editorial content and its displacement.
  • the invention is applicable to screens of any size and of any nature.
  • the invention is susceptible of industrial or useful application in the field of ergonomic advertising display, especially to improve the reading comfort, for a user, of editorial content in the presence of a promotional video display. .
  • the teaching of the invention also extends to a method for displaying a promotional video banner containing a video recorded in a video format, with editorial content, on a page, in a screen, according to which: the promotional video banner is initially positioned above the editorial content on the page and occupies the entire page width Lp;
  • the video expands as much as possible by taking up the entire available height of the video banner while maintaining its aspect ratio.
  • screen an electronic device capable of displaying content such as text, images, included in a mobile telephone, tablet or computer page: a display window of limited size, displayed by a screen , taking all or part of the size of the screen above: the promotional video content can be positioned at the top of the page, both above the editorial content or just before the editorial content, ie juxtaposed to it .
  • fully visible the space occupied by the video is 100% visible (it is not cut or hidden at the top or bottom) scroll the page up: user action (scroll up, drag down, etc8) to go to the top of the page or in the opposite direction of reading extends vertically: the video banner expands vertically (in height) and the video contained in the banner is maximized without distortion
  • a video banner will be understood to mean a rectangular or square display surface on or in a page containing a video displayed maximized on the page without deformation or according to its format or according to its aspect ratio, said banner video being of the same width Lp as the page.
  • editorial banner means a rectangular or square display surface in which editorial content is displayed and which occupies the page width Lp.
  • This "hero” element contains two video elements: a first "hero-video” element displaying the video in full width a second "hero-video-bg” element serving as a background
  • the height of the first "hero” element adapts according to the scroll level of the page, the "hero-video” element suitable for this height.
  • the step of maintaining 34 the sum of the video height Hv and the editorial height He equal to the height of the page Hp can thus comprise the following sub-steps, shown in Figure 5:
  • a first sub-step 341 of obtaining the height of the page includes for example the call of a Javascript function “window.innerHeight”, which allows to obtain the height of the page in pixels.
  • a second sub-step 342 of obtaining a scroll quantity of the editorial content is preferably a quantity in pixels, for example to obtain the number of pixels scrolled from the top of the page.
  • This step includes for example the call of a Javascript function “window.scrollY”.
  • a sub-step 344 of assigning the value of the difference to the video height is preferably set to 0 pixels, allowing the video to disappear when reading the editorial content.
  • This initialization threshold can be set to a number greater than zero to keep the video displayed permanently in a strip of minimum height defined by the threshold.
  • the test leading to sub-step 344 can for example be carried out via a Javascript function call “Math. max”.
  • a sub-step 345 of assigning the initialization threshold to the video height This keeps the video still showing if needed.
  • page will be understood to mean the editorial banner and the promotional video banner visible on the screen, which technically corresponds to the “viewport”.
  • the video content must be understood as a video banner, containing at least one video recorded in a video format and always displayed sharp in the video banner, and on a maximum surface respecting its format or ratio of aspect or aspect ratio. The video is thus always displayed maximized in the video banner.

Abstract

One aspect of the invention relates to a method for displaying a promotional video banner (1) containing a video recorded in a video format, with editorial content (2), on a page, in a screen, the page extending over a page height, from a page header, and over a page width, wherein the video is displayed at maximum size, in the video format, in the video banner, comprising the following steps: initially displaying the promotional video banner at a video height, from the page header, over the entire page; initially displaying the editorial content on the page in an editorial banner which extends in terms of height across the page over an editorial height and which occupies the entire page width, the sum of the video height and the editorial height initially being equal to the page height; scrolling the page to decrease the editorial height; keeping the sum of the video height and the editorial height equal to the page height, during scrolling.

Description

DESCRIPTION DESCRIPTION
TITRE : AFFICHAGE ERGONOMIQUE D’UN CONTENU VIDEO PROMOTIONNELTITLE: ERGONOMIC DISPLAY OF PROMOTIONAL VIDEO CONTENT
DOMAINE TECHNIQUE DE L’INVENTION TECHNICAL FIELD OF THE INVENTION
[0001] La présente demande concerne de façon générale, le domaine de l’affichage ergonomique sur un écran d’un contenu vidéo promotionnel, notamment à caractère publicitaire, simultanément à un contenu éditorial, notamment à caractère informationnel. This application relates generally to the field of ergonomic display on a screen of promotional video content, in particular of an advertising nature, simultaneously with editorial content, in particular of an informational nature.
[0002] Plus particulièrement, la présente demande concerne l’affichage simultané sur un écran interactif, notamment tactile, dans une page, d’un premier contenu vidéo ou bandeau vidéo et d’un second contenu pouvant excéder la taille de la page dans l’écran d’affichage, en réponse à des événements captés par l’écran ou via le pilotage de l’écran. [0002] More specifically, the present application relates to the simultaneous display on an interactive screen, in particular touch screen, in a page, of a first video content or video banner and of a second content which may exceed the size of the page in the display screen, in response to events captured by the screen or via the control of the screen.
[0003] L’invention est particulièrement adaptée aux écrans de petite taille, comme les écrans d’objets portables, notamment les téléphones mobiles. [0003] The invention is particularly suitable for small screens, such as the screens of portable objects, in particular mobile telephones.
ARRIERE-PLAN TECHNOLOGIQUE DE L’INVENTION TECHNOLOGICAL BACKGROUND OF THE INVENTION
[0004] Aux fins de la présente demande, on entendra par « bord » ou « extrémité » d’un contenu, le début ou la fin du contenu dans une zone mémoire ou dans tout autre moyen représentant le contenu, comme un fichier ou une mémoire graphique. On entendra par contenu vidéo, tout fichier décrivant une séquence animée d’images et par contenu éditorial, tout fichier numérique, pouvant contenir texte, images fixes, séquences d’images animées, comme par exemple un site internet. [0004] For the purposes of the present application, the term "edge" or "end" of a content will be understood to mean the beginning or the end of the content in a memory zone or in any other means representing the content, such as a file or a graphics memory. By video content, we mean any file describing an animated sequence of images and by editorial content, any digital file, which may contain text, still images, sequences of animated images, such as for example a website.
[0005] L’art antérieur connaît des méthodes d’affichage publicitaire dont la présentation est déclenchée par l’affichage à l’écran de parties du contenu éditorial, notamment lors du défilement de ce contenu à l’affichage pour ne montrer que des parties successives de ce contenu. Cela est représenté à la Figure 1 , qui montre une représentation schématique d’un procédé d’affichage de vidéo commerciale selon l’état de l’art. [0005] The prior art knows advertising display methods whose presentation is triggered by the display on the screen of parts of the editorial content, in particular during the scrolling of this content on display to show only parts sequences of this content. This is represented in Figure 1, which shows a schematic representation of a commercial video display method according to the state of the art.
[0006] Comme représenté à la Figure 1 , le procédé comprend une première étape A d’affichage de contenu éditorial, représenté par un rectangle hachuré. Ensuite, un contenu promotionnel tel qu’une vidéo commerciale v est affichée en haut de l’écran, représentée par un rectangle comprenant un bouton lecture triangulaire, dans un bandeau vidéo représenté par un rectangle uni blanc, réduisant l’espace pour le contenu éditorial et empêchant son affichage entier. Le rectangle uni noir représente le reste du contenu éditorial non affiché. Lors d’un ou plusieurs défilements dans le sens de lecture par l’utilisateur pour lire le reste du contenu éditorial, l’espace alloué au contenu promotionnel est réduit jusqu’à disparaître, représenté par un rectangle à bords en pointillés. [0006] As shown in Figure 1, the method comprises a first step A of displaying editorial content, represented by a hatched rectangle. Next, promotional content such as a commercial video v is displayed at the top of the screen, represented by a rectangle including a triangular play button, in a video banner represented by a plain white rectangle, reducing the space for editorial content and preventing its entire display. The solid black rectangle represents the rest of the undisplayed editorial content. During one or more scrolls in the reading direction by the user to read the rest of the editorial content, the space allocated to the promotional content is reduced until it disappears, represented by a rectangle with dotted edges.
[0007] Ainsi, l’affichage n’est pas ergonomique : l’ensemble du contenu promotionnel n’est affiché qu’au début de la lecture, puis seule une partie du contenu promotionnel est affichée jusqu’à disparaître. [0007] Thus, the display is not ergonomic: all of the promotional content is displayed only at the start of reading, then only part of the promotional content is displayed until it disappears.
[0008] Idéalement l’affichage publicitaire doit avoir lieu de façon secondaire lorsque le contenu éditorial est lu par un utilisateur et peut avoir lieu de façon prépondérante lorsque l’utilisateur a terminé la lecture du contenu éditorial. [0008] Ideally, the advertising display must take place secondarily when the editorial content is read by a user and can take place predominantly when the user has finished reading the editorial content.
[0009] Cependant, en pratique, il n’existe pas de façon standardisée d’informer un programme d’affichage mettant en œuvre un écran d’affichage de la fin de la lecture par un utilisateur d’un contenu éditorial. [0009] However, in practice, there is no standardized way of informing a display program implementing a display screen of the end of reading by a user of an editorial content.
[0010] L’affichage ergonomique d’un message vidéo publicitaire avec un contenu éditorial est pour l’art antérieur un problème technique difficile. [0010] The ergonomic display of an advertising video message with editorial content is a difficult technical problem for the prior art.
RESUME DE L’INVENTION SUMMARY OF THE INVENTION
[0011] L’invention offre une solution aux problèmes évoqués précédemment, en permettant d’afficher un contenu publicitaire de manière ergonomique et en particulier à la fin de la lecture d’un contenu éditorial. The invention offers a solution to the problems mentioned above, by making it possible to display advertising content in an ergonomic way and in particular at the end of the reading of editorial content.
[0012] Dans ce contexte, l’invention concerne un procédé d'affichage d'un bandeau vidéo promotionnel contenant une vidéo enregistrée selon un format vidéo, avec un contenu éditorial, sur une page, dans un écran, la page s'étendant sur une hauteur de page depuis un haut de page et sur une largeur de page, dans lequel la vidéo est affichée maximisée, selon le format vidéo, dans le bandeau vidéo, comprenant les étapes suivantes: [0012] In this context, the invention relates to a method for displaying a promotional video banner containing a video recorded in a video format, with editorial content, on a page, in a screen, the page extending over a page height from a page top and across a page width, in which the video is displayed maximized, according to the video format, in the video banner, comprising the following steps:
Afficher initialement le bandeau vidéo promotionnel sur une hauteur vidéo, depuis le haut de page, sur toute la largeur de page ; Initially display the promotional video banner on a video height, from the top of the page, over the entire width of the page;
Afficher initialement le contenu éditorial sur la page dans un bandeau éditorial qui s'étend en hauteur dans la page sur une hauteur éditoriale et qui occupe toute la largeur de page, la somme de la hauteur vidéo et de la hauteur éditoriale étant initialement égale à la hauteur de page ;Initially display the editorial content on the page in an editorial banner which extends in height in the page on an editorial height and which occupies the entire page width, the sum of the video height and the editorial height being initially equal to the page height;
Faire défiler le contenu éditorial en provoquant une diminution de sa surface d’affichage, et en diminuant la hauteur éditoriale d’affichage du contenu éditorial depuis le haut de page ; Scroll the editorial content by causing a reduction in its display surface, and by decreasing the editorial height for displaying the editorial content from the top of the page;
Maintenir la somme de la hauteur vidéo et de la hauteur éditoriale égale à la hauteur de page, lors du défilement, par le redimensionnement de la vidéo en hauteur dans le bandeau vidéo laissé libre lors de la diminution de la hauteur d’affichage du contenu éditorial depuis le haut de page. Maintain the sum of the video height and the editorial height equal to the page height, when scrolling, by resizing the video in height in the video banner left free when decreasing the display height of the editorial content from the top of the page.
[0013] Aux fins de la présente demande, l’expression « minimiser une vidéo », sera entendue au sens de diminuer la surface d’affichage de cette vidéo sur une page affichée dans un écran et « maximiser une vidéo », sera entendue au sens d’augmenter la surface d’affichage de cette vidéo sur une page affichée dans un écran. La minimisation ou la maximisation selon l’invention se font par redimensionnement en respectant le format vidéo originel d’enregistrement, i.e. sans déformation. Ainsi, on entend par un redimensionnement « sans déformation » le fait de redimensionner la vidéo tout en maintenant son ratio largeur sur hauteur originel. [0013] For the purposes of the present application, the expression "minimizing a video" will be understood in the sense of reducing the display surface of this video on a page displayed in a screen and "maximizing a video" will be understood in direction to increase the display surface of this video on a page displayed in a screen. The minimization or maximization according to the invention is done by resizing while respecting the original video recording format, i.e. without deformation. Thus, “distortion-free” resizing means resizing the video while maintaining its original width-to-height ratio.
[0014] La minimisation d’un bandeau vidéo, qui est une bande de même largeur qu’une page affichée dans un écran, se fera en réduisant la hauteur sur la page de la bande et la minimisation d’une vidéo contenue dans le bandeau sans déformation. [0014] The minimization of a video banner, which is a strip of the same width as a page displayed in a screen, will be done by reducing the height on the page of the strip and the minimization of a video contained in the without deformation.
[0015] La maximisation d’un bandeau vidéo, qui est une bande de même largeur qu’une page, se fera en augmentant la hauteur sur la page de la bande et la maximisation d’une vidéo contenue dans le bandeau sans déformation. [0015] The maximization of a video banner, which is a strip of the same width as a page, will be done by increasing the height on the page of the strip and the maximization of a video contained in the banner without deformation.
[0016] De même, on entendra au sens de la présente demande, que lorsque deux bandeaux pavent une page d’un écran, c’est-à-dire le recouvrent entièrement ensemble, la minimisation de l’un impliquera la maximisation de l’autre et inversement. [0016] Similarly, it will be understood within the meaning of the present application, that when two banners pave a page of a screen, that is to say cover it entirely together, the minimization of one will imply the maximization of the other and vice versa.
[0017] Enfin, on entendra au sens de la demande que l’expression « faire défiler » un contenu éditorial sur un écran consiste à afficher des portions d’un contenu éditorial dont l’affichage ne peut être effectué en une seule fois pour des questions d’ergonomie et de taille d’écran. Ainsi lors d’un défilement, il existe une situation où le début du contenu, stocké par exemple sous forme physique d’un fichier est atteint (lorsque l’on parcourt ce fichier dans le sens inverse de son sens de stockage) et une autre situation où la fin du fichier est atteinte (lorsque l’on parcourt ce fichier dans son sens de stockage ou sens de lecture), si cette fin existe. [0017] Finally, it will be understood within the meaning of the application that the expression "scrolling" an editorial content on a screen consists in displaying portions of an editorial content whose display cannot be carried out at one time for ergonomics and screen size issues. Thus during a scroll, there is a situation where the beginning of the content, stored for example in the physical form of a file is reached (when this file is browsed in the opposite direction to its storage direction) and another situation where the end of the file is reached (when this file is browsed in its storage direction or read direction), if this end exists.
[0018] On entend par « il ne reste pas de contenu à faire défiler » le fait que l’on atteint le début du fichier par défilement (dans le sens inverse du sens de lecture naturelle ou physique ou de stockage de ce contenu, un bord ou extrémité du contenu étant atteint par défilement). [0018] The term "there is no content left to scroll" means that the beginning of the file is reached by scrolling (in the opposite direction to the direction of natural or physical reading or storage of this content, a edge or end of the content being reached by scrolling).
[0019] Par opposition, la situation dans laquelle « il reste du contenu à faire défiler », quel que soit le sens de défilement, sera entendue, au sens de la présente demande comme la négation logique de la situation dans laquelle « il ne reste pas de contenu à faire défiler ». [0019] In contrast, the situation in which "there remains content to scroll", regardless of the direction of scrolling, will be understood, within the meaning of the present application as the logical negation of the situation in which "there remains no content to scroll.”
[0020] Outre les caractéristiques qui viennent d’être évoquées dans le paragraphe précédent, le procédé d’affichage selon un aspect de l’invention peut présenter une ou plusieurs caractéristiques complémentaires parmi les suivantes, considérées individuellement ou selon toutes les combinaisons techniquement possibles : [0020] In addition to the characteristics which have just been mentioned in the previous paragraph, the display method according to one aspect of the invention may have one or more additional characteristics among the following, considered individually or according to all technically possible combinations:
L’étape de maintien de la somme de la hauteur vidéo et de la hauteur éditoriale égale à la hauteur de page comprend les sous-étapes de : The step of keeping the sum of the video height and the editorial height equal to the page height includes the substeps of:
Obtention de la hauteur de la page, Get page height,
Obtention d’une quantité de défilement du contenu éditorial,Obtaining a scroll quantity of the editorial content,
Calcul d’une valeur de différence entre la hauteur de la page et la quantité de défilement du contenu éditorial, Calculation of a difference value between the height of the page and the amount of scrolling of the editorial content,
Si la valeur de la différence est supérieure à un seuil d’initialisation, attribution de la valeur de la différence à la hauteur vidéo, If the value of the difference is greater than an initialization threshold, allocation of the value of the difference to the video height,
Sinon, attribution du seuil d’initialisation à la hauteur vidéo. Otherwise, attribution of the initialization threshold to the video height.
A l’étape de maintien de la somme de la hauteur vidéo et de la hauteur éditoriale égale à la hauteur de page, la hauteur de la page, la quantité de défilement et le seuil d’initialisation sont en pixels. l’écran est tactile et le défilement est obtenu par un effleurement de l’écran l’écran comprend une page, la page étant une fenêtre d’un système d’exploitation et le défilement est obtenu par un périphérique de pointage ; l’affichage et le défilement sont obtenus par programmation d’un ordinateur muni d’une carte graphique pilotant l’écran ; la programmation est effectuée en langage « javascript » ; l’écran est un écran d’ordinateur et le défilement est capté par l’événement javascript « scroll » ; l’écran est un écran de téléphone mobile et le défilement est capté par l’événement javascript « drag » In the step of keeping the sum of the video height and the editorial height equal to the page height, the page height, the scroll amount and the initialization threshold are in pixels. the screen is tactile and scrolling is obtained by touching the screen the screen comprises a page, the page being a window of an operating system and the scrolling is obtained by a pointing device; the display and scrolling are obtained by programming a computer equipped with a graphics card driving the screen; the programming is carried out in “javascript” language; the screen is a computer screen and the scrolling is captured by the javascript “scroll” event; the screen is a mobile phone screen and the scrolling is captured by the javascript "drag" event
[0021] L’invention concerne aussi un dispositif comprenant des moyens pour la mise en œuvre du procédé selon l’invention, et notamment un dispositif comprenant un écran, une carte graphique et un ordinateur et des moyens logiciels pour positionner et faire défiler sur l’écran le contenu éditorial et afficher sur l’écran le contenu vidéo. The invention also relates to a device comprising means for implementing the method according to the invention, and in particular a device comprising a screen, a graphics card and a computer and software means for positioning and scrolling on the screen the editorial content and display the video content on the screen.
[0022] L’invention concerne aussi un produit programme d’ordinateur comprenant des instructions qui, lorsque le programme est exécuté par un ordinateur, conduisent celui-ci à mettre en œuvre le procédé selon l’invention. The invention also relates to a computer program product comprising instructions which, when the program is executed by a computer, lead the latter to implement the method according to the invention.
[0023] L’invention concerne aussi un support d'enregistrement lisible par ordinateur comprenant des instructions qui, lorsqu'elles sont exécutées par un ordinateur, conduisent celui-ci à mettre en œuvre le procédé selon l’invention. The invention also relates to a computer-readable recording medium comprising instructions which, when executed by a computer, lead the latter to implement the method according to the invention.
[0024] L’invention et ses différentes applications seront mieux comprises à la lecture de la description qui suit et à l’examen des figures qui l’accompagnent. The invention and its various applications will be better understood on reading the following description and on examining the accompanying figures.
BREVE DESCRIPTION DES FIGURES BRIEF DESCRIPTION OF FIGURES
[0025] Les figures sont présentées à titre indicatif et nullement limitatif de l’invention. The figures are presented for information only and in no way limit the invention.
La Figure 1 montre une représentation schématique d’un procédé d’affichage de vidéo commerciale selon l’état de l’art. Figure 1 shows a schematic representation of a commercial video display method according to the state of the art.
La figure 2 représente une page dans un écran d’un dispositif, la page étant partagé en un premier bandeau de même largeur que la page et un second bandeau de même largeur que la page, de surface supérieure à la surface du premier bandeau. La Figure 3 montre une représentation schématique d’un procédé d’affichage de contenu vidéo selon l’invention. FIG. 2 represents a page in a screen of a device, the page being divided into a first strip of the same width as the page and a second strip of the same width as the page, with a surface greater than the surface of the first strip. Figure 3 shows a schematic representation of a video content display method according to the invention.
La Figure 4 montre une autre représentation schématique du procédé d’affichage de contenu vidéo selon l’invention. Figure 4 shows another schematic representation of the video content display method according to the invention.
La Figure 5 montre une représentation schématique d’une étape du procédé d’affichage de contenu vidéo selon l’invention. Figure 5 shows a schematic representation of a step of the video content display method according to the invention.
DESCRIPTION DETAILLEE DETAILED DESCRIPTION
[0026] Sauf précision contraire, un même élément apparaissant sur des figures différentes présente une référence unique. [0026] Unless specified otherwise, the same element appearing in different figures has a single reference.
[0027] Le contexte de la présente demande est celui d’une publicité vidéo dite « outstream », c’est-à-dire le cas d’un message ou publicité vidéo affiché en dehors d’un contenu éditorial, ces deux éléments se partageant lors de leur chargement initial une partie de l’espace utile d’un écran via lequel ils sont regardés. Ces deux contenus sont représentés affichés sur un écran s d’un dispositif à la Figure 2. L’écran s représenté à la Figure 2 comprend une page p, comprenant un contenu vidéo 1 affiché en haut de la page p et occupant toute la largeur Lp de la page p, et un contenu éditorial 2 affiché en bas de la page p et occupant aussi toute la largeur Lp de la page p. La somme des hauteurs Hv du contenu vidéo 1 et He du contenu éditorial 2 correspond à la hauteur de la page Hp. [0027] The context of the present application is that of a so-called "outstream" video advertisement, that is to say the case of a video message or advertisement displayed outside editorial content, these two elements sharing during their initial loading part of the useful space of a screen through which they are viewed. These two contents are represented displayed on a screen s of a device in FIG. 2. The screen s represented in FIG. 2 comprises a page p, comprising a video content 1 displayed at the top of the page p and occupying the entire width Lp of page p, and an editorial content 2 displayed at the bottom of page p and also occupying the entire width Lp of page p. The sum of the heights Hv of the video content 1 and He of the editorial content 2 corresponds to the height of the page Hp.
[0028] Un problème important est alors dans ce cas, de déterminer quand et comment la publicité vidéo peut être autorisée à utiliser l’ensemble de l’espace d’affichage, lorsqu’elle est diffusée simultanément à un contenu informationnel. [0028] An important problem is then in this case, to determine when and how the video advertisement can be authorized to use the whole of the display space, when it is broadcast simultaneously with informational content.
[0029] Selon l’invention, l’autorisation est donnée par deux critères objectifs ou techniques : la présence ou la détection dans l’écran d’affichage d’au moins une extrémité du contenu éditorial et la détection d’un mouvement vertical de ce contenu initié par l’utilisateur, pour le faire défiler. According to the invention, the authorization is given by two objective or technical criteria: the presence or the detection in the display screen of at least one end of the editorial content and the detection of a vertical movement of this user-initiated content, to scroll it.
[0030] De façon équivalente, le contenu vidéo ou bandeau vidéo, notamment à caractère promotionnel croît à raison de la diminution du contenu éditorial sur la page, en redimensionnant la vidéo, contenue dans le bandeau vidéo, pour l’afficher sans déformation dans toute la hauteur de la zone laissée libre par le contenu éditorial. [0031] Il en résulte une croissance intuitive et fluide, i.e. ergonomique, d’un message vidéo par rapport à un contenu éditorial sur une page même de petite taille, sans affichage arbitraire du message vidéo additionnel sur le contenu éditorial. Le redimensionnement de la vidéo en hauteur dans le bandeau vidéo laissé libre lors d’une diminution de la hauteur d’affichage d’un contenu éditorial depuis un haut de page est caractéristique de l’invention et d’une remontée d’un utilisateur dans un contenu éditorial, a priori après une lecture de celui-ci ou d’une partie de celui-ci et constitue donc un moment privilégié et ergonomique d’affichage d’un message vidéo additionnel au contenu. Notamment car il n’est pas forcément prévu initialement qu’il y ait quelque chose au-dessus du contenu éditorial. [0030] Equivalently, the video content or video banner, in particular of a promotional nature, increases due to the reduction in the editorial content on the page, by resizing the video, contained in the video banner, to display it without distortion in any the height of the area left free by the editorial content. [0031] This results in an intuitive and fluid, ie ergonomic, growth of a video message relative to an editorial content on a page, even of small size, without arbitrary display of the additional video message on the editorial content. The resizing of the video in height in the video banner left free during a reduction in the height of display of editorial content from a top of the page is characteristic of the invention and of a rise of a user in editorial content, a priori after reading it or part of it and therefore constitutes a privileged and ergonomic moment for displaying a video message additional to the content. In particular because it is not necessarily initially planned that there is something above the editorial content.
[0032] Cela est représenté à la Figure 3, qui montre une représentation schématique du procédé selon l’invention. This is shown in Figure 3, which shows a schematic representation of the method according to the invention.
[0033] Dans le procédé selon l’invention, à une étape A un bandeau éditorial comprenant un contenu éditorial est affiché par un écran sur une page, le bandeau éditorial étant représenté par un rectangle hachuré. Un contenu vidéo v est ensuite affiché à une étape B dans un bandeau vidéo représenté par un rectangle uni blanc. Le contenu vidéo v est représenté par un rectangle comprenant un bouton « lecture » triangulaire. Le bandeau vidéo a une hauteur Hv et le bandeau éditorial comprenant le contenu éditorial a une hauteur He. Lors d’un défilement de l’utilisateur dans le sens inverse du sens de lecture, donc vers le haut sur la Figure 3, comme le début du contenu éditorial est atteint, la hauteur He du bandeau éditorial sera réduite. L’invention maintient la somme des hauteurs du bandeau vidéo Hv et du bandeau éditorial He égale à la hauteur de la page Hp affichée par l’écran. Cela résulte donc en l’augmentation de la hauteur Hv du bandeau vidéo. Lors de cette augmentation, le contenu vidéo v est avantageusement affiché sans déformation, c’est-à-dire en conservant le ratio largeur sur hauteur initial de la vidéo. Par exemple, si l’utilisateur fait défiler tout le contenu éditorial dans le sens inverse de lecture, le contenu éditorial peut disparaître pour laisser place au contenu vidéo, la hauteur Hv du bandeau vidéo étant alors égale à la hauteur Hp de la page, comme représenté à l’étape C. In the method according to the invention, in step A, an editorial banner comprising editorial content is displayed by a screen on a page, the editorial banner being represented by a hatched rectangle. A video content v is then displayed at a step B in a video banner represented by a plain white rectangle. The video content v is represented by a rectangle comprising a triangular “play” button. The video banner has a height Hv and the editorial banner comprising the editorial content has a height He. When the user scrolls in the opposite direction to the reading direction, i.e. upwards in Figure 3, as the start of the editorial content is reached, the height He of the editorial banner will be reduced. The invention keeps the sum of the heights of the video banner Hv and of the editorial banner He equal to the height of the page Hp displayed by the screen. This therefore results in an increase in the height Hv of the video strip. During this increase, the video content v is advantageously displayed without deformation, that is to say while preserving the initial width-to-height ratio of the video. For example, if the user scrolls all the editorial content in the opposite direction to reading, the editorial content may disappear to make way for the video content, the height Hv of the video banner then being equal to the height Hp of the page, as shown in step C.
[0034] Lorsque l’utilisateur souhaite reprendre la lecture du contenu éditorial comme à l’étape D, il fait défiler la page vers le bas, c’est-à-dire dans le sens de lecture, pour augmenter la hauteur He du bandeau éditorial et ainsi réduire la hauteur Hv du bandeau vidéo, l’invention maintenant la somme des hauteurs He et Hv égale à la hauteur de la page Hp. Enfin, lorsque la hauteur He du contenu éditorial occupe toute la page, c’est-à-dire lorsque la hauteur He est égale à la hauteur de la page Hp, la hauteur du bandeau vidéo Hv peut être nulle, comme représenté à l’étape E. Dans une variante, un seuil de hauteur vidéo Hv peut être prédéterminé pour toujours avoir un affichage du bandeau vidéo. [0034] When the user wishes to resume reading the editorial content as in step D, he scrolls the page downwards, that is to say in the direction of reading, to increase the height He of the banner editorial and thus reduce the height Hv of the video banner, the invention maintaining the sum of the heights He and Hv equal to the page height Hp. Finally, when the height He of the editorial content occupies the entire page, that is to say when the height He is equal to the height of the page Hp, the height of the video banner Hv can be zero, as shown in step E. In a variant, a video height threshold Hv can be predetermined in order to always have a display of the video banner.
[0035] Pour les contenus d’intérêt pour l’invention, dont la hauteur est supérieure à la hauteur de la page d’affichage, la condition d’au moins une extrémité du contenu est équivalente à la présence d’une seule extrémité du contenu dans la page. [0035] For the content of interest for the invention, the height of which is greater than the height of the display page, the condition of at least one end of the content is equivalent to the presence of a single end of the content on the page.
[0036] La méthode ou procédé de l’invention comprend alors l’augmentation de la proportion de la page allouée au message publicitaire en sens inverse de la diminution par défilement de la surface d’affichage du contenu informationnel, initié par l’utilisateur. En partant d’une hauteur d’initialisation, par exemple de zéro pixel en hauteur d’affichage, le contenu vidéo additionnel va aller jusqu’à occuper potentiellement l’ensemble de l’espace utile en hauteur ou pleine hauteur de la page, lorsque la diminution de contenu informationnel ou « éditorial » par défilement le fait disparaître de l’écran et de façon fluide. The method or process of the invention then comprises increasing the proportion of the page allocated to the advertising message in the opposite direction to the reduction by scrolling of the display surface of the informational content, initiated by the user. Starting from an initialization height, for example zero pixels in display height, the additional video content will go so far as to potentially occupy all of the useful space in height or full height of the page, when the reduction of informational or “editorial” content by scrolling makes it disappear from the screen and in a fluid manner.
[0037] Une des caractéristiques de l’invention est aussi que le contenu vidéo additionnel n’est pas affiché dans un format fixe et progressivement découvert lors d’un défilement du contenu éditorial provoquant une diminution de sa surface d’affichage comme dans l’art antérieur mais qu’il est redimensionné et maximisé en hauteur et la vidéo qu’il contient est nettement affichée sur l’écran dans la page affichée (« viewport » en anglais). Le bandeau vidéo est redimensionné sur toute la hauteur laissée libre par la diminution de la zone ou bandeau d’affichage du contenu éditorial. Le contenu vidéo ou bandeau vidéo est donc clair dans sa partie vidéo pendant toute la durée de l’augmentation de sa hauteur d’affichage, ce qui améliore le confort visuel de l’utilisateur ou observateur et la qualité d’affichage, sans troncature, et donc l’ergonomie. [0037] One of the characteristics of the invention is also that the additional video content is not displayed in a fixed format and progressively discovered during scrolling of the editorial content causing a reduction in its display surface as in the prior art but that it is resized and maximized in height and the video that it contains is clearly displayed on the screen in the displayed page (“viewport” in English). The video banner is resized to the full height left free by reducing the editorial content display area or banner. The video content or video banner is therefore clear in its video part throughout the duration of the increase in its display height, which improves the visual comfort of the user or observer and the display quality, without truncation, and therefore ergonomics.
[0038] Lorsque le défilement accroît la surface d’affichage du contenu informationnel ou éditorial, le message vidéo pourra être minimisé, en respectant son format d’enregistrement, ou même non affiché. When scrolling increases the display surface of the informational or editorial content, the video message may be minimized, while respecting its recording format, or even not displayed.
[0039] A l’inverse, lorsque le défilement ou la translation du contenu éditorial sur la page de l’écran diminue la surface d’affichage du contenu éditorial, le message vidéo ou vidéo est maximisé selon l’invention : c’est-à-dire qu’il est affiché maximisé, en respectant son format d’enregistrement, dans un bandeau vidéo s’étendant sur toute la hauteur laissée disponible sur la page par le contenu éditorial et la vidéo contenu dans le bandeau vidéo est affichée ( nette) sur une largeur telle que le quotient de la largeur d’affichage et de la hauteur d’affichage du message vidéo est égal au ratio d’enregistrement ou format du contenu vidéo, comme 4/3 ou 16/9. Le message ou vidéo, par exemple promotionnel, peut donc être affiché sans déformation sur tout type d’écran ou média, comme un téléphone mobile, un écran d’ordinateur ou tout écran de dispositif mobile, complémentairement au contenu éditorial, pendant tout le défilement. [0039] Conversely, when the scrolling or translation of the editorial content on the page of the screen reduces the display surface of the editorial content, the message video or video is maximized according to the invention: that is to say that it is displayed maximized, respecting its recording format, in a video banner extending over the entire height left available on the page by the editorial content and the video contained in the video banner is displayed (clear) over a width such that the quotient of the display width and the display height of the video message is equal to the recording ratio or format of the video content , such as 4/3 or 16/9. The message or video, for example promotional, can therefore be displayed without distortion on any type of screen or media, such as a mobile telephone, a computer screen or any screen of a mobile device, in addition to the editorial content, during the entire scrolling .
[0040] La Figure 4 montre une représentation schématique du procédé 3 d’affichage de contenu vidéo selon l’invention. [0040] Figure 4 shows a schematic representation of the method 3 for displaying video content according to the invention.
[0041] Le procédé 3 comprend quatre étapes : [0041] Method 3 comprises four steps:
Une première étape 31 d’affichage initial du bandeau vidéo promotionnel sur une hauteur vidéo Hv, depuis le haut de page, sur toute la largeur de page Lp ; A first step 31 of initial display of the promotional video banner on a video height Hv, from the top of the page, over the entire page width Lp;
Une deuxième étape 32 d’affichage initial du contenu éditorial sur la page dans un bandeau éditorial qui s'étend en hauteur dans la page sur une hauteur éditoriale He et qui occupe toute la largeur de page Lp, la somme de la hauteur vidéo Hv et de la hauteur éditoriale He étant initialement égale à la hauteur de page Hp ; A second step 32 of initial display of the editorial content on the page in an editorial banner which extends in height in the page over an editorial height He and which occupies the entire page width Lp, the sum of the video height Hv and the editorial height He being initially equal to the page height Hp;
Une troisième étape 33 comprenant le défilement du contenu éditorial en provoquant une diminution de sa surface d’affichage, et en diminuant la hauteur éditoriale He d’affichage du contenu éditorial depuis le haut de page 5 A third step 33 comprising the scrolling of the editorial content by causing a reduction in its display surface, and by reducing the editorial height He for displaying the editorial content from the top of the page 5
Une quatrième étape 34 de maintien de la somme de la hauteur vidéo Hv et de la hauteur éditoriale He égale à la hauteur de page Hp, lors du défilement, par le redimensionnement de la vidéo en hauteur dans le bandeau vidéo laissé libre lors de la diminution de la hauteur d’affichage du contenu éditorial depuis le haut de page. A fourth step 34 of maintaining the sum of the video height Hv and the editorial height He equal to the page height Hp, during scrolling, by resizing the video in height in the video strip left free during the reduction the display height of the editorial content from the top of the page.
[0042] L’invention peut être complétée par l’affichage préalable du message sur une hauteur plus grande, avec réduction lors d’une translation du texte ou du contenu éditorial dans le sens de lecture et par une étape supplémentaire consistant, pour éviter des bandes noires sur la page de part et d’autre de la vidéo affichée, à afficher en arrière-plan derrière la vidéo affichée selon son format, i.e. en respectant son ratio d’enregistrement ou d’aspect, la même vidéo affichée sur toute la largeur de la page avec distorsion. [0042] The invention can be supplemented by the prior display of the message on a greater height, with reduction during a translation of the text or the content editorial in the direction of reading and by an additional step consisting, in order to avoid black bands on the page on either side of the video displayed, in displaying in the background behind the video displayed according to its format, ie respecting its recording or aspect ratio, the same video displayed across the width of the page with distortion.
[0043] L’invention est donc compatible avec de nombreuses méthodes d’affichage préexistantes. Le choix d’afficher le bandeau vidéo, contenant la vidéo affichée selon son format maximal, depuis un haut de page (« viewport ») et d’afficher en-dessous le contenu éditorial en cours de minimisation permet de combler le vide potentiel laissé par le contenu éditorial sans déformer ou distordre la vidéo contenue dans le bandeau vidéo, y compris pendant la transition du contenu éditorial vers un affichage du contenu vidéo sur 100% de la hauteur de la page ou dimension verticale de la page. Il en résulte un affichage de la vidéo du bandeau, notamment promotionnel, ergonomique car complémentaire de l’affichage éditorial sur l’écran. The invention is therefore compatible with many pre-existing display methods. The choice to display the video banner, containing the video displayed in its maximum format, from a top of the page ("viewport") and to display below the editorial content being minimized makes it possible to fill the potential void left by the editorial content without distorting or distorting the video contained in the video banner, including during the transition of the editorial content to a display of the video content on 100% of the page height or vertical dimension of the page. This results in a display of the video of the banner, in particular promotional, ergonomic because complementary to the editorial display on the screen.
[0044] Il en résulte une gestion fluide et ergonomique de l’affichage d’un message vidéo ou vidéo promotionnel ou publicitaire, indépendamment du sens du contenu éditorial pour un être humain, i.e. une gestion technique de l’interface homme-machine d’affichage, en fonction de paramètres physiques objectifs. [0044] This results in fluid and ergonomic management of the display of a promotional or advertising video or video message, independently of the meaning of the editorial content for a human being, ie technical management of the man-machine interface of display, depending on objective physical parameters.
[0045] A nouveau, de façon visuelle, le message vidéo ou vidéo s’étendra sur la page pour suivre l’extrémité du contenu éditorial qui est la plus proche de lui lors d’un défilement de ce contenu. Pour un message disposé au-dessus du contenu, le message s’étendra ainsi lorsque le haut du contenu descendra sur la page. [0045] Again, visually, the video or video message will span the page to follow the end of the editorial content that is closest to it when scrolling through this content. For a post above the content, the post will expand as the top of the content moves down the page.
[0046] Par analogie si le contenu éditorial est visualisé par un papyrus enroulé, le déroulement du papyrus au-delà de son début sera compensé par l’affichage du contenu vidéo contenant la vidéo maximisée dans ce contenu vidéo ou bandeau vidéo, en même temps que le papyrus sur l’écran, dans la page. [0046] By analogy, if the editorial content is displayed by a rolled up papyrus, the scrolling of the papyrus beyond its beginning will be compensated by the display of the video content containing the maximized video in this video content or video banner, at the same time than the papyrus on the screen, in the page.
[0047] Ces notions seront clarifiées dans les exemples ou modes de réalisation ci- dessous, nullement limitatifs. These notions will be clarified in the examples or embodiments below, which are in no way limiting.
[0048] Dans un premier mode de réalisation, un téléphone mobile muni d’un écran tactile affiche une page, notamment au format html. In a first embodiment, a mobile phone equipped with a touch screen displays a page, in particular in html format.
[0049] Un programme « javascript » associé à la page html permet à cette page de détecter un effleurement orienté appliqué à l’écran par un utilisateur. [0050] Lors de l’arrivée sur la page, un contenu vidéo est affiché dans un lecteur vidéo, sur une surface inférieure ou égale à 30% de la surface de la page et selon un premier bandeau s’étendant sur toute la largeur de la page Lp. A “javascript” program associated with the html page enables this page to detect an oriented touch applied to the screen by a user. [0050] Upon arrival on the page, video content is displayed in a video player, on a surface less than or equal to 30% of the surface of the page and according to a first band extending over the entire width of the LP page.
[0051] Sur le reste de la page est affiché dans un second bandeau selon toute la largeur de la page Lp un contenu éditorial. On the rest of the page is displayed in a second banner along the entire width of the Lp page editorial content.
[0052] Lors d’une interaction de l’utilisateur avec l’écran tactile, le programme réagit aux événements « drag up » par défilement du contenu dans le sens d’une lecture du contenu éditorial par un utilisateur ou « drag down » par défilement du contenu éditorial dans le sens inverse du sens de lecture. [0052] During a user interaction with the touch screen, the program reacts to "drag up" events by scrolling the content in the sense of a reading of the editorial content by a user or "drag down" by scrolling of the editorial content in the opposite direction to the direction of reading.
[0053] Lors d’un défilement du contenu éditorial, constitué de texte, images statiques ou séquences vidéo, le début du contenu éditorial disparaît pour laisser place à la suite du contenu puis à sa fin s’il en existe une. When scrolling the editorial content, consisting of text, static images or video sequences, the beginning of the editorial content disappears to make way for the rest of the content and then at its end if there is one.
[0054] Le comportement du dispositif selon l’invention dans ce premier mode est alors visualisé par le procédé ou la méthode d’affichage suivant : The behavior of the device according to the invention in this first mode is then displayed by the following process or display method:
[0055] Si à partir de l’image initiale, l’utilisateur indique par effleurement une direction inverse au sens de lecture, le bandeau vidéo est immédiatement agrandi au détriment du contenu éditorial, qui est réduit d’autant et la vidéo dans ce bandeau est maximisée. If from the initial image, the user indicates by touching a direction opposite to the reading direction, the video banner is immediately enlarged to the detriment of the editorial content, which is reduced accordingly and the video in this banner is maximized.
[0056] Si à partir de l’image initiale, l’utilisateur indique par effleurement une direction égale au sens de lecture, le bandeau vidéo est immédiatement minimisé à l’avantage du contenu éditorial, qui est agrandit d’autant et la vidéo dans ce bandeau est minimisée. If from the initial image, the user indicates by touching a direction equal to the direction of reading, the video banner is immediately minimized to the advantage of the editorial content, which is enlarged accordingly and the video in this blindfold is minimized.
[0057] L’affichage d’une vidéo dans le premier bandeau ou bandeau vidéo, pourra être effectué avec la plus grande netteté, selon son format dans une zone du premier bandeau moins large que la page sur un fond, en arrière-plan, de même largeur présentant la vidéo déformée et donc floue mais couvrant ou occupant toute la largeur de la page Lp sans sortir de l’enseignement de la présente invention. [0057] The display of a video in the first banner or video banner can be performed with the greatest clarity, depending on its format, in an area of the first banner that is narrower than the page on a background, in the background, of the same width presenting the distorted and therefore blurred video but covering or occupying the entire width of the page Lp without departing from the teaching of the present invention.
[0058] Toutefois, l’enseignement de la présente invention s’étend à un affichage dans un bandeau de la hauteur laissée libre sur la page par un contenu éditorial en diminution par défilement, avec des bandes noires, éventuellement inégales de part et d’autre d’une vidéo pour une vidéo centrée ou excentrée, mais aussi pour une vidéo non centrée, aligné à gauche ou à droite de la page, le reste du bandeau étant une bande noire. Dans certains cas, les bandes noires pourront être au-dessus ou au- dessous de la vidéo dans le bandeau vidéo. However, the teaching of the present invention extends to a display in a banner of the height left free on the page by an editorial content which is reduced by scrolling, with black bands, possibly unequal on either side. another of a video for a centered or off-centered video, but also for a video not centered, aligned to the left or right of the page, the rest of the banner being a black band. In some cases, the black bands may be above or below the video in the video banner.
[0059] La version minimisée du premier bandeau est maintenue en place et durant toutes les opérations d’effleurement de l’utilisateur, ou de façon équivalente de défilement du texte du contenu éditorial dans le second bandeau, jusqu’à ce que le programme javascript détecte la présence du début du contenu éditorial dans le second bandeau, qui serait synonyme d’une diminution du bandeau éditorial en hauteur d’affichage. Ceci peut correspondre à une indication par événement d’un sens d’effleurement associé au sens inverse du sens de lecture pour le contenu éditorial et un dépassement du début du contenu. Dans ce cas, le programme peut considérer que l’utilisateur affichant le début du contenu éditorial et ne souhaitant pas lire la suite est revenu au début de la lecture et souhaite voir le contenu vidéo. [0059] The minimized version of the first banner is kept in place and during all the user's touch operations, or in an equivalent way of scrolling the text of the editorial content in the second banner, until the javascript program detects the presence of the start of the editorial content in the second banner, which would be synonymous with a reduction of the editorial banner in display height. This may correspond to an indication per event of a touch direction associated with the opposite direction of the reading direction for the editorial content and a passing of the beginning of the content. In this case, the program can consider that the user displaying the beginning of the editorial content and not wishing to read more has returned to the beginning of the reading and wants to see the video content.
[0060] Dans un second mode de réalisation, on pourra utiliser comme page une fenêtre définie par un système d’exploitation sur un écran d’ordinateur et un navigateur internet utilisant les événements javascript « scroll down » et « scroll up » d’un périphérique de pointage tel qu’une souris, comme équivalents de « drag down » et « drag up » dans le premier mode. D’ailleurs ces événements « drag » peuvent se ramener à des événements « scroll » sur certains systèmes, écrans ou pages. In a second embodiment, the page can be used as a window defined by an operating system on a computer screen and an internet browser using the "scroll down" and "scroll up" javascript events of a pointing device such as a mouse, as equivalents of "drag down" and "drag up" in the first mode. Moreover, these "drag" events can be reduced to "scroll" events on certain systems, screens or pages.
[0061] On remarque que quel que soit le mode d’affichage du bandeau vidéo durant la lecture par un utilisateur, l’effet de l’invention est d’afficher depuis le haut de la page sur toute la hauteur disponible le contenu vidéo et la vidéo dans ce bandeau selon son format, à mesure de la disparition du contenu informationnel ou éditorial induit par défilement. La somme de la hauteur vidéo du contenu vidéo affichant la vidéo selon son format et de la hauteur éditoriale est donc maintenue constante pour un affichage et pour un défilement. Cette somme est toujours égale ou maintenue égale à la hauteur de la page ou hauteur de page, pour obtenir l’effet technique de l’invention qui peut être mis en œuvre par un programme d’ordinateur, notamment javascript ayant accès à une bibliothèque graphique. [0061] It is noted that regardless of the display mode of the video banner during playback by a user, the effect of the invention is to display from the top of the page over the entire available height the video content and the video in this banner according to its format, as the informational or editorial content induced by scrolling disappears. The sum of the video height of the video content displaying the video according to its format and of the editorial height is therefore kept constant for a display and for a scroll. This sum is always equal or kept equal to the height of the page or page height, to obtain the technical effect of the invention which can be implemented by a computer program, in particular javascript having access to a graphics library .
[0062] L’invention permet donc avec des moyens très simples de subordonner l’affichage d’un contenu vidéo ou bandeau vidéo, notamment à caractère promotionnel ou publicitaire et contenant une vidéo affichée toujours nettement, à une action explicite de l’utilisateur indiquant objectivement et techniquement une situation dans laquelle la lecture d’un message vidéo, peut être affichée maximisée en plein écran, au moyen de propriétés fournies par l’écran sur la position du contenu éditorial et son déplacement. [0062] The invention therefore makes it possible, with very simple means, to subordinate the display of video content or video banner, in particular of a promotional or advertising nature and containing a video that is always clearly displayed, to an action explicit from the user indicating objectively and technically a situation in which the reading of a video message, can be displayed maximized in full screen, by means of properties provided by the screen on the position of the editorial content and its displacement.
[0063] L’invention est applicable à des écrans de toute taille et de toutes natures. The invention is applicable to screens of any size and of any nature.
[0064] L’invention est susceptible d’application industrielle ou utile dans le domaine de l’affichage publicitaire ergonomique, tout spécialement pour améliorer le confort de lecture, pour un utilisateur, d’un contenu éditorial en présence d’un affichage vidéo promotionnel. [0064] The invention is susceptible of industrial or useful application in the field of ergonomic advertising display, especially to improve the reading comfort, for a user, of editorial content in the presence of a promotional video display. .
[0065] De façon alternative, l’enseignement de l’invention s’étend aussi à un procédé d’affichage d’un bandeau vidéo promotionnel contenant une vidéo enregistrée selon un format vidéo, avec un contenu éditorial, sur une page, dans un écran, selon lequel : le bandeau vidéo promotionnel est initialement positionné au-dessus du contenu éditorial sur la page et occupe toute la largeur de page Lp; [0065] Alternatively, the teaching of the invention also extends to a method for displaying a promotional video banner containing a video recorded in a video format, with editorial content, on a page, in a screen, according to which: the promotional video banner is initially positioned above the editorial content on the page and occupies the entire page width Lp;
Lorsque la vidéo est entièrement visible sur la page à l’écran ainsi que le haut du contenu éditorial de la page, si l’utilisateur fait défiler la page vers le haut, le contenu vidéo promotionnel s’étend verticalement au-delà de sa hauteur initiale, jusqu'à potentiellement occuper toute la page; When the video is fully visible on the page on screen along with the top of the editorial content of the page, if the user scrolls up the page, the promotional video content extends vertically beyond its height initial, until potentially occupying the whole page;
La vidéo s’agrandit autant que possible en prenant toute la hauteur disponible du bandeau vidéo tout en conservant son ratio d’affichage. The video expands as much as possible by taking up the entire available height of the video banner while maintaining its aspect ratio.
[0066] On entendra par : écran : un dispositif électronique capable d’afficher du contenu tel que du texte, des images, compris dans un téléphone mobile, tablette ou ordinateur page : une fenêtre d’affichage de taille limitée, affichée par un écran, prenant tout ou partie de la taille de l’écran au-dessus : le contenu vidéo promotionnel peut être positionné en haut de page, à la fois par-dessus le contenu éditorial ou juste avant le contenu éditorial, i.e juxtaposé à celui-ci. entièrement visible : l’espace occupé par la vidéo est visible à 100% (il n’est pas coupé ou caché en haut ou en bas) faire défiler la page vers le haut : action de l’utilisateur (scroll up, drag down, etc...) pour remonter vers le haut de la page ou sens inverse de lecture s'étend verticalement : le bandeau vidéo s'agrandit verticalement (en hauteur) et la vidéo contenue dans le bandeau se maximise sans distorsion[0066] We will understand by: screen: an electronic device capable of displaying content such as text, images, included in a mobile telephone, tablet or computer page: a display window of limited size, displayed by a screen , taking all or part of the size of the screen above: the promotional video content can be positioned at the top of the page, both above the editorial content or just before the editorial content, ie juxtaposed to it . fully visible: the space occupied by the video is 100% visible (it is not cut or hidden at the top or bottom) scroll the page up: user action (scroll up, drag down, etc...) to go to the top of the page or in the opposite direction of reading extends vertically: the video banner expands vertically (in height) and the video contained in the banner is maximized without distortion
[0067] Dans toute la demande, on entendra comme bandeau vidéo une surface d’affichage rectangulaire ou carrée sur ou dans une page contenant une vidéo affiché maximisé sur la page sans déformation ou selon son format ou selon son ratio d’aspect, ledit bandeau vidéo étant de même largeur Lp que la page. [0067] Throughout the application, a video banner will be understood to mean a rectangular or square display surface on or in a page containing a video displayed maximized on the page without deformation or according to its format or according to its aspect ratio, said banner video being of the same width Lp as the page.
[0068] De même on entendra par bandeau éditorial, une surface rectangulaire ou carrée d’affichage dans laquelle un contenu éditorial est affiché et qui occupe la largeur de page Lp. [0068] Similarly, the term “editorial banner” means a rectangular or square display surface in which editorial content is displayed and which occupies the page width Lp.
[0069] A titre d’exemple de mise en œuvre de l’invention dans un navigateur Chrome sur mobile ou ordinateur, on pourra intégrer dans une page html, le code ci- dessous en annexe. As an example of implementation of the invention in a Chrome browser on mobile or computer, the code below in the appendix can be integrated into an html page.
[0070] Ce code permet d’obtenir l’effet de l’invention dans une page html, à savoir effectuer les opérations ci-dessous: This code makes it possible to obtain the effect of the invention in an html page, namely to perform the operations below:
Ajouter sur l’élément body une marge verticale au-dessus du contenu éditorial de la page web, égale à la hauteur du viewport Add on the body element a vertical margin above the editorial content of the web page, equal to the height of the viewport
Ajouter comme premier enfant de l’élément body un élément avec l'id "hero" d’une largeur égale à la largeur du viewport Add as first child of the body element an element with the id "hero" of a width equal to the width of the viewport
Cet élément "hero" contient deux éléments vidéos: un premier élément "hero-video" affichant la vidéo en pleine largeur un deuxième élément "hero-video-bg" servant de fond This "hero" element contains two video elements: a first "hero-video" element displaying the video in full width a second "hero-video-bg" element serving as a background
A chaque fois que l’événement "scroll" (ou "drag") est déclenché, la hauteur du premier élément "hero" s'adapte en fonction du niveau de défilement de la page, l'élément "hero-video" s’adaptant à cette hauteur. [0071] L’étape de maintien 34 de la somme de la hauteur vidéo Hv et de la hauteur éditoriale He égale à la hauteur de la page Hp peut ainsi comprendre les sous-étapes suivantes, représentées à la Figure 5 : Each time the "scroll" (or "drag") event is triggered, the height of the first "hero" element adapts according to the scroll level of the page, the "hero-video" element suitable for this height. The step of maintaining 34 the sum of the video height Hv and the editorial height He equal to the height of the page Hp can thus comprise the following sub-steps, shown in Figure 5:
Une première sous-étape 341 d’obtention de la hauteur de la page. Cette étape comprend par exemple l’appel d’une fonction Javascript « window.innerHeight », qui permet d’obtenir la hauteur de page en pixels.A first sub-step 341 of obtaining the height of the page. This step includes for example the call of a Javascript function “window.innerHeight”, which allows to obtain the height of the page in pixels.
Une deuxième sous-étape 342 d’obtention d’une quantité de défilement du contenu éditorial. Cette quantité est préférentiellement une quantité en pixels, par exemple pour obtenir le nombre de pixels défilés depuis le haut de page. Cette étape comprend par exemple l’appel d’une fonction Javascript « window.scrollY». A second sub-step 342 of obtaining a scroll quantity of the editorial content. This quantity is preferably a quantity in pixels, for example to obtain the number of pixels scrolled from the top of the page. This step includes for example the call of a Javascript function “window.scrollY”.
Une sous-étape 343 de calcul d’une valeur de différence entre la hauteur de la page et la quantité de défilement du contenu éditorial, cette valeur étant préférentiellement en pixels et permettant de rendre compte de la hauteur disponible au-dessus du bandeau de contenu éditorial. A sub-step 343 of calculating a difference value between the height of the page and the amount of scrolling of the editorial content, this value being preferably in pixels and making it possible to take account of the height available above the content banner editorial.
Si la valeur de la différence est supérieure à un seuil d’initialisation, une sous-étape 344 d’attribution de la valeur de la différence à la hauteur vidéo. Cette sous-étape permet de maintenir en permanence la hauteur du bandeau vidéo dans l’espace libre disponible au-dessus du bandeau éditorial. Le seuil d’initialisation est de préférence fixé à 0 pixels, permettant de faire disparaître la vidéo en lisant le contenu éditorial. Ce seuil d’initialisation peut être fixé à un nombre supérieur à zéro pour maintenir la vidéo affichée en permanence dans un bandeau de hauteur minimale définie par le seuil. Le test menant à la sous-étape 344 peut par exemple être réalisé via un appel de fonction Javascript « Math. max ». If the value of the difference is greater than an initialization threshold, a sub-step 344 of assigning the value of the difference to the video height. This sub-step makes it possible to permanently maintain the height of the video banner in the free space available above the editorial banner. The initialization threshold is preferably set to 0 pixels, allowing the video to disappear when reading the editorial content. This initialization threshold can be set to a number greater than zero to keep the video displayed permanently in a strip of minimum height defined by the threshold. The test leading to sub-step 344 can for example be carried out via a Javascript function call “Math. max”.
Sinon, une sous-étape 345 d’attribution du seuil d’initialisation à la hauteur vidéo. Cela permet de maintenir la vidéo toujours affichée si nécessaire. Otherwise, a sub-step 345 of assigning the initialization threshold to the video height. This keeps the video still showing if needed.
[0072] En fonction des plateformes et des navigateurs, l’effet de l’invention pourra donc être reproduit sur une page html, par un code pouvant varier mais effectuant les opérations ci-dessus, de façon équivalente. [0073] Dans toute la demande on entendra par « page » le bandeau éditorial et le bandeau vidéo promotionnel visibles à l’écran, ce qui correspond techniquement au "viewport". [0072] Depending on the platforms and browsers, the effect of the invention may therefore be reproduced on an html page, by a code which may vary but which performs the above operations in an equivalent manner. [0073] Throughout the application, the term “page” will be understood to mean the editorial banner and the promotional video banner visible on the screen, which technically corresponds to the “viewport”.
[0074] Dans toute la demande, le contenu vidéo doit être entendu comme un bandeau vidéo, contenant au moins une vidéo enregistrée selon un format vidéo et toujours affichée nette dans le bandeau vidéo, et sur une surface maximum respectant son format ou rapport d’aspect ou ratio d’aspect. La vidéo est ainsi toujours affichée maximisée dans le bandeau vidéo. [0074] Throughout the application, the video content must be understood as a video banner, containing at least one video recorded in a video format and always displayed sharp in the video banner, and on a maximum surface respecting its format or ratio of aspect or aspect ratio. The video is thus always displayed maximized in the video banner.
ANNEXE ANNEX
<style> <styling>
#hero {width: 100%; height: 100vh; overflow: hidden; position: fixed; top: 0; left: 0; z- index: 1 ;} #hero { width: 100%; height: 100vh; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 1;}
#hero-video {width: 100%; height: 100%; object-fit: contain; position: absolute; top: 0;} #hero-video-bg {filter: blur( 10px); width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; z-index: -1 ; #hero-video { width: 100%; height: 100%; object-fit: contain; position: absolute; top: 0;} #hero-video-bg {filter: blur( 10px); width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; z-index: -1;
</style> cdiv id="hero"> cvideo id="hero-video" autoplay loop muted src="https://file-examples- com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"x/video> cvideo id="hero-video-bg" autoplay loop muted src="https://file-examples- com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"x/video></style> cdiv id="hero"> cvideo id="hero-video" autoplay loop muted src="https://file-examples- com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"x /video> cvideo id="hero-video-bg" autoplay loop muted src="https://file-examples- com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"x/video>
</div> </div>
<script> const hero = document.getElementByld('hero'); document.body.style.marginTop = '100vh’; window.addEventListener('scroH', () => { var scrolledPixels = window.scrollY; hero. style. height = Math.max(0, window.innerHeight - scrolledPixels) + 'px'; }); window.addEventListener('DOMContentLoaded', () => {window.scrollTo(0, window.innerHeight * 0.80);}) <script> const hero = document. getElementByld('hero'); document.body.style.marginTop = '100vh';window.addEventListener('scroH', () => { var scrolledPixels = window.scrollY; hero.style.height = Math.max(0, window.innerHeight - scrolledPixels) + 'px'; }); window.addEventListener('DOMContentLoaded', () => {window.scrollTo(0, window.innerHeight * 0.80);})
</script> </script>

Claims

REVENDICATIONS
[Revendication 1] Procédé (3) d'affichage d'un bandeau vidéo (1 ) promotionnel contenant une vidéo enregistrée selon un format vidéo, avec un contenu éditorial (2), sur une page, dans un écran, la page s'étendant sur une hauteur de page (Hp) depuis un haut de page et sur une largeur de page (Lp), dans lequel la vidéo est affichée maximisée sans déformation, selon le format vidéo, dans le bandeau vidéo, comprenant les étapes suivantes : [Claim 1] Method (3) for displaying a promotional video banner (1) containing a video recorded in a video format, with editorial content (2), on a page, in a screen, the page extending on a page height (Hp) from a top of page and on a page width (Lp), in which the video is displayed maximized without distortion, according to the video format, in the video banner, comprising the following steps:
- Afficher (31 ) initialement le bandeau vidéo promotionnel sur une hauteur vidéo (Hv), depuis le haut de page, sur toute la largeur de page (Lp);- Display (31) initially the promotional video banner on a video height (Hv), from the top of the page, over the entire page width (Lp);
- Afficher (32) initialement le contenu éditorial sur la page dans un bandeau éditorial qui s'étend en hauteur dans la page sur une hauteur éditoriale (He) et qui occupe toute la largeur de page (Lp), la somme de la hauteur vidéo (Hv) et de la hauteur éditoriale (He) étant initialement égale à la hauteur de page (Hp) ; - Display (32) initially the editorial content on the page in an editorial banner which extends in height in the page on an editorial height (He) and which occupies the entire width of the page (Lp), the sum of the video height (Hv) and the editorial height (He) being initially equal to the page height (Hp);
- Faire défiler (33) le contenu éditorial en provoquant une diminution de sa surface d’affichage, et en diminuant la hauteur éditoriale (He) d’affichage du contenu éditorial depuis le haut de page ; - Scroll (33) the editorial content by causing a reduction in its display surface, and by reducing the editorial height (He) of display of the editorial content from the top of the page;
- Maintenir (34) la somme de la hauteur vidéo et de la hauteur éditoriale (He) égale à la hauteur de page (Hp), lors du défilement, par le redimensionnement de la vidéo en hauteur dans le bandeau vidéo laissé libre lors de la diminution de la hauteur d’affichage du contenu éditorial depuis le haut de page. - Maintain (34) the sum of the video height and the editorial height (He) equal to the page height (Hp), when scrolling, by resizing the video in height in the video banner left free when decrease in the display height of editorial content from the top of the page.
[Revendication 2] Procédé (3) selon la revendication précédente caractérisé en ce que l’étape de maintien de la somme de la hauteur vidéo et de la hauteur éditoriale égale à la hauteur de page comprend les sous-étapes de : [Claim 2] Method (3) according to the preceding claim characterized in that the step of maintaining the sum of the video height and the editorial height equal to the page height comprises the sub-steps of:
- Obtention (341 ) de la hauteur de la page (Hp), - Obtaining (341 ) the height of the page (Hp),
- Obtention (342) d’une quantité de défilement du contenu éditorial,- Obtaining (342) a scroll quantity of the editorial content,
- Calcul (343) d’une valeur de différence entre la hauteur de la page (Hp) et la quantité de défilement du contenu éditorial, - Calculation (343) of a difference value between the height of the page (Hp) and the amount of scrolling of the editorial content,
- Si la valeur de la différence est supérieure à un seuil d’initialisation, attribution (344) de la valeur de la différence à la hauteur vidéo (Hv), Sinon, attribution (345) du seuil d’initialisation à la hauteur vidéo (Hv). - If the value of the difference is greater than an initialization threshold, allocation (344) of the value of the difference to the video height (Hv), Otherwise, assignment (345) of the initialization threshold to the video height (Hv).
[Revendication 3] Procédé (3) selon la revendication précédente caractérisé en ce qu’à l’étape de maintien de la somme de la hauteur vidéo (Hv) et de la hauteur éditoriale (He) égale à la hauteur de page (Hp), la hauteur de la page (Hp), la quantité de défilement et le seuil d’initialisation sont en pixels. [Claim 3] Method (3) according to the preceding claim characterized in that at the step of maintaining the sum of the video height (Hv) and the editorial height (He) equal to the page height (Hp) , page height (Hp), scroll amount and initialization threshold are in pixels.
[Revendication 4] Procédé (3) selon l’une quelconque des revendications précédentes dans lequel l’écran est tactile et le défilement est obtenu par un effleurement de l’écran. [Claim 4] Method (3) according to any one of the preceding claims, in which the screen is touch-sensitive and the scrolling is obtained by touching the screen.
[Revendication 5] Procédé (3) selon l’une quelconque des revendications 1 à 3 dans lequel l’écran est une fenêtre d’un système d’exploitation et le défilement est obtenu par un périphérique de pointage. [Claim 5] A method (3) according to any of claims 1 to 3 wherein the screen is an operating system window and scrolling is achieved by a pointing device.
[Revendication 6] Procédé (3) selon l’une quelconque des revendications 1 à 3 dans lequel, l’affichage et le défilement sont obtenus par programmation d’un ordinateur muni d’une carte graphique pilotant l’écran. [Claim 6] Method (3) according to any one of Claims 1 to 3, in which the display and the scrolling are obtained by programming a computer equipped with a graphics card controlling the screen.
[Revendication 7] Procédé (3) selon l’une quelconque des revendications précédentes dans lequel la programmation est effectuée en langage « javascript ». [Claim 7] Method (3) according to any one of the preceding claims, in which the programming is carried out in the "javascript" language.
[Revendication 8] Procédé (3) selon la revendication précédente dans lequel l’écran est un écran d’ordinateur et le défilement est capté par l’événement javascript « scroll » p [Claim 8] Method (3) according to the preceding claim, in which the screen is a computer screen and the scrolling is captured by the javascript "scroll" event p
[Revendication 9] Procédé (3) selon la revendication 7 dans lequel l’écran est un écran de téléphone mobile et le défilement est capté par l’événement javascript « drag » , [Claim 9] Method (3) according to claim 7 in which the screen is a mobile telephone screen and the scrolling is captured by the javascript "drag" event,
[Revendication 10] Dispositif comprenant des moyens pour la mise en œuvre du procédé (3) selon l’une quelconque des revendications précédentes. [Claim 10] Device comprising means for carrying out the method (3) according to any one of the preceding claims.
[Revendication 11] Dispositif selon la revendication précédente caractérisé en ce qu’il comprend un écran, une carte graphique et des moyens logiciels pour positionner et faire défiler sur l’écran le contenu éditorial et afficher sur l’écran le contenu vidéo.[Claim 11] Device according to the preceding claim, characterized in that it comprises a screen, a graphics card and software means for positioning and scrolling the editorial content on the screen and displaying the video content on the screen.
[Revendication 12] Produit programme d’ordinateur comprenant des instructions qui, lorsque le programme est exécuté par un ordinateur, conduisent celui-ci à mettre en œuvre le procédé (3) selon l’une quelconque des revendications 1 à 9. [Revendication 13] Support d’enregistrement lisible par ordinateur comprenant des instructions qui, lorsqu'elles sont exécutées par un ordinateur, conduisent celui-ci à mettre en œuvre le procédé (3) selon l’une quelconque des revendications 1 à 9. [Claim 12] Computer program product comprising instructions which, when the program is executed by a computer, cause the latter to implement the method (3) according to any one of Claims 1 to 9. [Claim 13] A computer-readable recording medium comprising instructions which, when executed by a computer, cause it to carry out the method (3) according to any one of claims 1 to 9.
PCT/EP2021/070956 2020-08-07 2021-07-27 Ergonomic display of promotional video content WO2022028946A1 (en)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
FR2008348A FR3113348B1 (en) 2020-08-07 2020-08-07 ERGONOMIC DISPLAY OF PROMOTIONAL VIDEO CONTENT
FRFR2008348 2020-08-07

Publications (1)

Publication Number Publication Date
WO2022028946A1 true WO2022028946A1 (en) 2022-02-10

Family

ID=73643027

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/EP2021/070956 WO2022028946A1 (en) 2020-08-07 2021-07-27 Ergonomic display of promotional video content

Country Status (2)

Country Link
FR (2) FR3113348B1 (en)
WO (1) WO2022028946A1 (en)

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2019123213A1 (en) * 2017-12-18 2019-06-27 Koppasoft Display rendering method and system

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2019123213A1 (en) * 2017-12-18 2019-06-27 Koppasoft Display rendering method and system

Also Published As

Publication number Publication date
FR3114471A1 (en) 2022-03-25
FR3113348A1 (en) 2022-02-11
FR3113348B1 (en) 2023-03-17

Similar Documents

Publication Publication Date Title
US8788963B2 (en) Scrollable preview of content
US9411487B2 (en) User interface presentation of information in reconfigured or overlapping containers
US9213460B2 (en) Visual editing tool buffer region
JP5295222B2 (en) How to hide part of display content
KR100672377B1 (en) Method and Apparatus for digital image processing in Digital receiver
US8560960B2 (en) Browsing and interacting with open windows
US8705938B2 (en) Previewing effects applicable to digital media content
US20050229111A1 (en) Presentation of large pages on small displays
US10088999B2 (en) Scroll end effects for websites and content
CN107544730B (en) Picture display method and device and readable storage medium
JP2007509433A (en) Multiple mode window presentation system and process
US20140129992A1 (en) Preview cursor for image editing
CN107707965B (en) Bullet screen generation method and device
US20240086056A1 (en) Method and apparatus for interacting with application program, and electronic device
WO2022028946A1 (en) Ergonomic display of promotional video content
FR3091371A1 (en) Tactile interface for displaying and handling a document and method of implementation.
WO2013057658A1 (en) Enhancement of presentation or online collaboration meeting
US20060062552A1 (en) System and method of adapting sub-picture data for being displayed on mini-screens
US9530183B1 (en) Elastic navigation for fixed layout content
US8880424B1 (en) Digital advertising method and system
Krantz et al. Using graphics, photographs, and dynamic media.
CA2581233C (en) System and method of adapting sub-picture data for being displayed on mini-screens
FR2980861A1 (en) METHOD FOR DISPLAYING DIGITAL CONTENT ON A SCREEN
AU2015252106A1 (en) Flexible display apparatus and method of providing user interface by using the same
EP2605114A1 (en) Data processing process and device for an interface used to consult contents

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 21749622

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 21749622

Country of ref document: EP

Kind code of ref document: A1