Comment Philips TV Browser obtient-il des images d'aperçu pour les pages?

Question

Je souhaite fournir ma propre image d'aperçu pour la page du navigateur Philips TV (modèles NETTV). Il est affiché près de l'adresse de la page dans l'historique.

Comment puis-je le faire?

(image à partir d'avforum, obtenu de la recherche google)

Philips TV utiliser Opera comme navigateur 11,6. chaîne userAgent est:

Opera/9.80 (Linux mips; U; HbbTV/1.1.1 (; Philips; ; ; ;) CE-HTML/1.0 NETTV/4.0.2; en) Presto/2.10.250 Version/11.60 

Answer 1

Je ne sais pas exactement comment le navigateur TV Philips fonctionne, mais la chose la plus logique d'essayer d'abord serait la balise og:image et voir si le téléviseur ramasse.

<meta property="og:image" content="http://example.com/image.png"/> 

Sinon, le téléviseur utilise probablement une bibliothèque de capture d'écran. Vous pouvez essayer cette solution de contournement pour obtenir le comportement souhaité:

Tout d'abord, découvrez l'agent utilisateur de votre téléviseur. Par exemple, accédez à http://whatsmyuseragent.com/ depuis votre téléviseur.

Puis sur votre page, créez un petit script qui vérifie l'agent utilisateur, et s'il s'agit du téléviseur, affichez votre image d'aperçu en superposition pendant quelques secondes.

Espérons que le téléviseur prendra une capture d'écran du rendu initial de la page, puis votre splash TV s'affichera.

function hideSplash() { 
 
    document.getElementById("tv-splash").style.display = "none"; 
 
} 
 

 
// Remove '|Mozilla' when development is ready 
 
if (/Philips|Mozilla/.test(navigator.userAgent)) { 
 
    setTimeout(hideSplash, 2000); 
 
} else { 
 
    hideSplash(); 
 
}

#tv-splash { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #f00 url(http://i.imgur.com/IonCAf7.jpg) center center no-repeat; 
 
    background-size: 50%; 
 
    z-index: 1; 
 
}

<div id="tv-splash"></div> 
 
<h1>My website</h1>