2016-11-05 10 views
1

Ich verwende chromecast SDK 3.0 und möchte einen benutzerdefinierten Empfänger erstellen. Es funktioniert gut mit Video und Audio, hat aber Probleme beim Bildercasting.
in html Datei:Benutzerdefinierter Empfänger zeigt das Bild nicht korrekt an

<body style="margin: 0"> 
     <img id="androidImage" src="" /> 
... 


in js Datei:

sampleplayer.CastPlayer.prototype.loadImage_ = function(info) { 
    this.log_('loadImage_'); 
    var url = info.message.media.contentId; 
    document.getElementById("androidImage").src=url; 
    this.setState_(sampleplayer.State.PLAYING, true); 
}; 

Mit einem solchen Implementierung Bild auf 1 Sekunde erscheint und verschwindet auf Hintergrundbild mit zu ersetzen. Auch das Bild wird mit einer falschen Anpassungsgröße angezeigt. Um den Stil zu skalieren, habe ich einen solchen Code verwendet:

<style> 
     img#androidImage { 
     height:100%; 
     width:100%; 
     } 
    </style> 

Hat jemand eine Eingabe? Vielen Dank!

+0

Funktioniert es in Ihrem Browser korrekt? Wenn der Körper nicht 100% Höhe des Browser-Viewports hat, kann das Bild auch nicht auf 100% Höhe skaliert werden. Eine schnelle Lösung setzt normalerweise die Höhe auf 100% von body und html sowie – ilwcss

Antwort

1

Die Bildverarbeitung unterscheidet sich von Video und Audio in dem Sinne, dass es keinen "spielenden" Zustand gibt. Da Bilder mit einem HTML-Bild-Tag behandelt werden, sind ihnen keine Ereignisse zugeordnet (im Falle von Video/Audio erzeugt das Media-Element eine Reihe von Ereignissen, auf die das Cast-SDK trifft). Versuchen Sie also nicht, den Zustand für Ihre Bilder auf der Empfängerseite einzustellen. Sie haben die Möglichkeit, die Standard/Stil-Empfänger zu verwenden, die Bilder auf einfachste Weise verarbeiten. Wenn Sie einen benutzerdefinierten Empfänger schreiben möchten, können Sie einfach einen benutzerdefinierten Namespace verwenden, um die Bild-URL an Ihren Empfänger und auf der Empfängerseite zu senden, die URL abrufen und ein Image-Tag (ähnlich dem, was Sie versuchen) ausfüllen. Es gibt keine Notwendigkeit, sich mit anderen Aspekten des Empfänger-SDK zu befassen, die sich um andere Arten von Medien herum befinden. Eine letzte Sache: Sie werden nicht in der Lage sein, mit Bildern viel zu tun, wenn Sie planen, Slideshow-Funktionalität, ausgefallene Übergänge usw. hinzuzufügen; Sie können Bilder nacheinander anzeigen, ausblenden und anschließend einblenden (um einen angenehmeren Übergang zu erzielen).

+0

thnx zur Erklärung. Das Problem war im HTML-Layout. In unserem Fall muss das Bild-Tag unter dem Player platziert werden und seine Position sollte auf "absolut" eingestellt werden. – MSerg

Verwandte Themen