我不知道飛利浦電視瀏覽器是如何工作的,但最順理成章的事情來嘗試首先將是og:image
標籤,看看電視選了。
<meta property="og:image" content="http://example.com/image.png"/>
如果沒有,那麼電視可能使用了一些屏幕截圖庫。您可以嘗試此解決方法以獲得所需的行爲:
首先,找出您的電視的用戶代理。例如,從電視機瀏覽到http://whatsmyuseragent.com/。
然後在您的頁面上創建一個檢查用戶代理的小腳本,如果它是電視,則將預覽圖片顯示爲疊加幾秒鐘。
希望電視會截取頁面的初始渲染,然後您的電視會顯示。
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>
更新問題:有關瀏覽器添加的信息 –
好吧,你可以看到用戶代理包含單詞「飛利浦」,所以你也許可以用它來識別當電視看你的頁。 – hampusohlsson
@IvanSolntsev你做到了嗎? – hampusohlsson