[Hackaton 2024][Cobalt][HTML] Check EC36 - Avoid autoplay for videos and audio content

[standousset]

Avoid autoplay for videos and audio content

The title of the associated rule is measured in this ticket.
Example : Autoplaying media consumes unnecessary energy, especially when users might not be actively engaging with the content.

Associated rule link

The link to the existing rule measured referenced into the "rules specifications" repository
Example : EC10 Python

Language and platform

The language and platform of the associated rule.
Example: Python
It's supposed to be described in the rule itself.

Measure justification

Very important: give us elements that justify that your measure of this rule justifies (or doesn't) the environmental impact. Without a good justification, your measure will not be accepted by Green Code Initiative.

Here are some elements that can help to justify your measure:

• A publication or documentation that calculates the impact of the rule (provide the link to the documentation or at least a reference if the documentation is not available online). Please indicate us where to find the information in the document (page, paragraph) and perform a summary if possible.
• Measurement reported by an impact calculation tool (this can be one of the tools made available during the challenge or another).
• Justification by several measurement tools will have more impact
• Procedure for carrying out the measurement

Validation

Indicate whether the measurement performed validates or invalidates this rule.

Indicate the percentage of certainty of this validation (0% for "I'm not sure at all", 100% for "I'm certain of the result")

[RemiGaston]

Avoid autoplay for videos and audio content

The title of the associated rule is measured in this ticket. Example : Autoplaying media consumes unnecessary energy, especially when users might not be actively engaging with the content.

Associated rule link

The link to the existing rule measured referenced into the "rules specifications" repository Example : EC36 HTML

Language and platform

HTML

Measure justification

Video content represent 80% of data stored on the web (Shift Project, 2019). Video autoplay represents the epitomy of what a bloatware is. Considering the recent tendancy of automatically displaying videos on social platform (Facebook, Instagram, TikTok, etc. ), setting a rule to avoid autoplaying videos seems an important ecodesign rule to tackle. It furthermore represent a bad experience for users, and has been described as a bad practice in many green coding referentials (RGESN, 115 bonnes pratiques, etc. ), as well as a potential issue in accessibility guidelines.

The Shift Project 2019's article L'insoutenable usage de la vidéo en ligne describes autoplay as "an addictive form of design" that is against digital sobriety.

Our test protocol

We created a front web interface displaying a video, leaving preload enabled. We aimed at testing the different cases where the preload is set to true, false and metadata only.

-Autoplay = false, preload = false

Here are some elements that can help to justify your measure:

 * A publication or documentation that calculates the impact of the rule (provide the link to the documentation or at least a reference if the documentation is not available online). Please indicate us where to find the information in the document (page, paragraph) and perform a summary if possible.

 * Measurement reported by an impact calculation tool (this can be one of the tools made available during the challenge or another).

 * Justification by several measurement tools will have more impact

 * Procedure for carrying out the measurement

Validation

Indicate whether the measurement performed validates or invalidates this rule.

Indicate the percentage of certainty of this validation (0% for "I'm not sure at all", 100% for "I'm certain of the result")

[RemiGaston]

to do list

Définir les scénarios : done

• Autoplay = false; preload = auto (le navigateur est libre de faire ce qu'il veut)
• Autoplay = false; preload = none
• Autoplay = false; preload = metadata
• Autoplay = true ;preload = auto (le navigateur est libre de faire ce qu'il veut)
• Autoplay = true; preload = none
• Autoplay = true; preload = metadata

Créer les différents scénarios/cas de test : une branche dans le git correspond à chacun des scénarios Définir la procédure de test : Un navigateur chrome, sans autre onglet, on teste des branches sur les différentes versions de la page correspondant aux 6 scénarios identifiés.

Fruggr étant un SaaS, il faut à chaque fois faire la merge request sur github et faire un test sur l'url. Stan

Pour ETSdiff et GreenIT analysis on pourra faire le test en local.

Fruggr = 3 run ETSdiff = 20 run GreenITanalysis = 20 run (recharger la page à chaque itération) Choisir les outils de test : GreenIT analysis, Fruggr, ETS diff avec Vjoule Répliquer les tests : selenium le joue en local sur chaque branche de git Ecrire la doc : in progress Se renseigner sur les méthodes de calcul des outils : to do

[bgatellier]

Associated rule title

Avoid autoplay for videos and audio content

Associated rule link

The link to the existing rule measured referenced into the "rules specifications" repository Example : EC36 HTML

Language and platform

HTML

Measure justification

Video autoplay represents the epitomy of what a bloatware is. Considering the recent tendancy of automatically displaying videos on social platform (Facebook, Instagram, TikTok, etc. ), setting a rule to avoid autoplaying videos seems an important ecodesign rule to tackle. It furthermore represent a bad experience for users, and has been described as a bad practice in many green coding referentials.

Public articles

• Video usage grew 24% in 2022, now equating to 65% of all internet traffic, Sandvine, 2023
• 61% of publishers autoplay at least half of video ads, MediaRadar, September 2017

Other referentials

• Accessibility (international, WCAG): Autoplay: A method MUST be provided to pause, stop, or hide any media content that begins playing automatically and which lasts 5 seconds or more. Deque University, WGAC 2.2.2
• Sustainability (French, RGESN): RGESN 4.1 - Le service numérique comporte-t-il uniquement des animations, vidéos et sons dont la lecture automatique est désactivée ?
• Design (French, Designers Ethiques): Guide d'écoconception de services numériques 7.2

Test protocol

• Define the scenarios :
  1. <video preload="auto" src="">
  2. <video preload="none" src="">
  3. <video preload="metadata" src="">
  4. <video preload="auto" autoplay src="">
  5. <video preload="none" autoplay src="">
  6. <video preload="metadata" autoplay src="">
• Update the website code :
  • Add a short video into the homepage of the team's website: https://cobalt.challenge.ecocode.io/#/
  • Create a branch per scenario
• Tools used :
  • Fruggr (Chrome)
  • ETSDiff (Firefox)
  • GreenIT analysis (webbrowser plugin, Brave)

Note: as thepreload="auto" property means that the browser can implement the behavior he wants, we need to make sure to measures the change in the different webbrowsers, even if they both stated that the default behavior is "metadata" (see See implementation notes).

• Measurement reported by an impact calculation tool (this can be one of the tools made available during the challenge or another).

	Fruggr	ETSDiff	GreenIT Analysis
Measured metrics	Carbon score Water score Energy score	Energy (joule) Transfered Data (octet) Storage data (octet)	EcoIndex
Links to the metrics	Detailed metrics	Detailed metrics (Framacalc)	Detailed metrics
Number of runs	3	5	2

• Procedure for carrying out the measurement

Fruggr: as this is a SaaS service it can only browse public URLs. So for each scenario:

1. merge the Git branch where the scenario is implemented on the main branch to make the changes available on the public URL
2. Run 3 analysis with Fruggr

ETSDiff:

• Setup:
  • install and run locally the website (git clone, npm run dev command)
  • use Selenium and define the following user scenario:
    1. Go to the homepage (where the video is)
    2. Wait for 6s
    3. Browse to another page
    4. Wait for 2s
  • write Python scripts to control Selenium and record metrics using ETSDiff.

Validation

Indicate whether the measurement performed validates or invalidates this rule.

Indicate the percentage of certainty of this validation (0% for "I'm not sure at all", 100% for "I'm certain of the result")

	Fruggr	ETSDiff	GreenIT Analysis
Validate the rules	❓	✅	❓
Certainty	Accuracy: Awaiting constructor response Precision: 95%	Accuracy: 90% Precision: 95%	Accuracy: unknown Precision: 85%