Diffuser des vidéos sur une télévision avec la chromecast

Caster des contenus vidéos sur une télévision

by · Lecture: 2 minutes

Avec la multitude de services de diffusion de contenus comme Netflix, Amazon Prime ou Canal+, il n’est pas rare d’avoir un accès au service depuis une tablette ou un ordinateur mais il n’est pas toujours aisé d’envoyer le contenu vidéo directement sur la télévision.

Voici quelques astuces pour caster vos contenus vidéos sur votre télévision, en quelques secondes et sans prise de tête.

Utiliser Chrome pour caster les vidéos

Hé oui, si vous avez une ChromeCast par exemple, il est vraiment bien plus simple d’utiliser le navigateur Chrome qui possède une option qui s’appelle tout simplement Caster.

Je suis fervent utilisateur de FireFox et il faut bien avouer que là, on ne peut pas rivaliser avec Chrome en ce qui concerne le casting.

Lire une vidéo depuis les services de streaming

Si vous utilisez un service de streaming, lancez le site, choisissez votre film ou série et lancez-la.

Ensuite, cliquer sur l’icône kebab (l’icône avec les trois points verticaux) à côté de votre avatar Google et de la barre de recherche puis sélectionnez l’option Caster:

Caster des contenus vidéos sur une télévision photo
Diffuser sur la TV avec Chrome

Une fenêtre de notification apparaît et vous offre la possibilité de choisir l’appareil vers lequel envoyer la diffusion de la vidéo.

Et c’est tout ! On ne peut pas faire plus simple!

Lire la suite

Calculer la durée totale des vidéos d'un dossier, bash, linux

Calculer la durée totale des vidéos d’un dossier avec ffprobe

by · Lecture: 6 minutes

Vous avez un dossier rempli de vidéos et vous voulez connaître leur durée totale ? C’est typiquement le genre de besoin qui arrive quand on prépare une formation en ligne, une bibliothèque de replays, un cours vidéo ou une fiche produit.

Compter les fichiers, c’est facile. Additionner proprement leurs durées, c’est déjà plus drôle. Heureusement, quelques commandes suffisent pour obtenir un total fiable, sans ouvrir chaque vidéo à la main comme un moine copiste du MP4.

La méthode la plus robuste consiste à utiliser ffprobe, l’outil d’analyse fourni avec FFmpeg. Il lit les métadonnées des fichiers audio et vidéo, puis retourne leur durée dans un format facile à additionner.

Lire la suite

Ajouter un lien avec le nombre d'articles et le total du panier WooCommerce photo

Rendre la page panier WooCommerce réactive

by · Lecture: 2 minutes

Lors de mon dernier projet WooCommerce, j’ai remarqué que la page panier de WooCommerce n’était pas vraiment réactive sous Safari (iPhone, iOS) : le tableau ne s’empile pas comme il le devrait et toutes les colonnes sont comprimées. Les dernières colonnes sont hors du viewport.

Safari sous iOS (iPhone) semble être le seul concerné – je n’ai pas réussi à reproduire ce comportement sur FireFox, Chrome ou Opera.

Le site en question utilise Astra, qui est vraiment bien éprouvé, ainsi qu’Elementor comme constructeur de page.

Voici comment rendre le tableau du panier WooCommerce réactif, en utilisant quelques lignes de CSS.

Forcer la réactivité du panier WooCommerce

J’ai opté pour une solution propre, en CSS, en ne ciblant que les iPhones puisqu’ils sont les seuls concernés (Safari + résolution d’écran).

Voici donc le code utilisé pour rendre le panier WooCommerce réactif:

/*
Plugin Name: Sky WooCommerce Responsive Cart
Plugin URI: https://mattbiscay.com
Description: Make WooCommerce cart responsive
Version: 1.1
Author: Matt Biscay
Author URI: https://mattbiscay.com
*/

/* responsive cart */
@media only screen and ( max-width: 479px ) {
  
  .short-description, .product_meta, body.woocommerce div.product .woocommerce-tabs, body.woocommerce #content div.product .woocommerce-tabs { display: none; }
  body.woocommerce .images { float: none !important; width: auto !important; margin-bottom: 40px !important; clear: both !important; }
  
  table .product-thumbnail { display: none; }
  
  .woocommerce-page #content div.product form.cart .variations { margin-left: 0; }
  
  table.cart th, #content table.cart th, table.cart td, #content table.cart td, table.cart tr, #content table.cart tr, #content-area table tr, #content-area table td, #content-area table th { padding: .857em 0.287em; }
  
  .woocommerce .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 { width: 100% !important; }
  .woocommerce .woocommerce form .form-row, .woocommerce-page form .form-row { width: auto !important; float: none !important; }
  
  #order_review .shop_table { margin-left: 0; }
  
  /* cart: tax on its own line */
  .includes_tax { display: block; }
  
}

/* cart weird bug on Safari: cart table is not collapsing */
/* this corrects the bug on iphones */

@media (max-width: 768px){
  .iphone .woocommerce table.shop_table_responsive tr,
  .iphone .woocommerce-page table.shop_table_responsive tr {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
  }
  
  .woocommerce table.shop_table_responsive tr td::before, .woocommerce-page table.shop_table_responsive tr td::before {
    content: attr(data-title) ' ';
    font-weight: 700;
    float: left;
  }
  
  p.no-shipping-options {
    clear: both;
    margin-top: 3rem;
  }
}
Code language: CSS (css)

Lire la suite

← PrécédentSuivant →