YouTube im Smart TV abspielen – Smart TV App
Im Smart TV Tutorial werden wir heute endlich mal das Video abspielen. Ihr erinnert euch vielleicht, dass das Video einen Link beinhaltet der fokussiert wird. Dieser kann natürlich auch eine Url haben, die intern sowie extern liegen kann. Bei uns hat das Video bereits die Eigenschaft playUrl, die dem Link zugewiesen wird. Diese playUrl setzen wir nun zusammen. Das geschieht beim Auslesen der Videos vom Webserver in der Category.js:
obj = JSON.parse(xmlhttp.responseText); for(var i = 0;i < obj.length; i++) { //Videos erstellen var video = new Video(); video.title = obj[i].title; video.author = obj[i].author; video.previewImage = obj[i].thumb; video.playUrl = obj[i].player + ".html?id=" + escape(obj[i].id); res[res.length] = video; }
Ich möchte hier pro Player eine eigene Datei nutzen. Derzeit gibt es bei uns ja nur YouTube, also müssen wir nun eine neue Datei namens youtube.html in das Hauptverzeichnis legen. Der Inhalt der neuen Datei sieht bei mir so aus:
<!DOCTYPE html> <html> <body> <script> function get(name) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] == name) { return pair[1]; } } return(false); } var code = '<object width="' + screen.availWidth + '" height="' + screen.availHeight + '" data="https://www.youtube.com/v/' + escape(get("id")) + '&feature&autoplay=1" type="application/x-shockwave-flash">'; code = code + '<param name="src" value="https://www.youtube.com/v/' + get('id') + '&feature&autoplay=1" />'; code = code + '</object>'; document.write(code); </script> </body> </html>
Einfach den Get-Parameter auslesen und in den YouTube-Code schreiben. Ihr solltet das später am besten über die JavaScript-API von YouTube machen. Im Emulator bekommt man aktuell ein Video im XXL-Format:
Das mit dem Format liegt am Emulator. Denn screen bildet dort nicht den Bildschirm des Emulators, sondern euren realen Bildschirm ab.
Mit dem Schritt haben wir dann auch die Basis unserer App fertig. Klar, es fehlen noch einige Feinheiten, aber im Endeffekt hat das ja nicht mehr direkt etwas mit der Smart TV SDK selbst zu tun. Im nächsten Beitrag kümmern wir uns dann um das Packaging und später auch in das Einstellen der App in den App Store.
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Kommentare
Thomas schrieb am 24.04.2013:
Vielen Dank für das Tutorial, für den Einstieg ist es gut zu gebrauchen. Was mich noch interessieren würde: Wie kann man Einstellungen, z.B. Benutzername und Passwort, speichern?
Stefan Wienströer schrieb am 24.04.2013:
Ich würde glaube ich einfach zu Cookies greifen. Kannst aber auch aufs Dateisystem gehen, schau mal: http://www.samsungdforum.com/Guide/ref00001/file_api_filesystem.html (hab ich aber selbst noch nicht gemacht)
Seref Durak schrieb am 02.12.2015:
bekomme eine leere seite mit der meldung missing plugin
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project