Videos auflisten (Smart TV App)

Im letzten Beitrag des Smart TV Tutorials ging es um das Anzeigen des Menüs unserer App. Heute sind die Videos an der Reihe. Wir schalten beim Wechseln des Menü-Eintrags auch sofort die Videos dazu. Da sich jemand gemeldet hat, bei dem die App noch nicht wirklich starten wollte, werde ich auch am Ende des Beitrag mal kompletten meinen Stand zum Download anbieten.

Zwischenergebnis nach diesem Beitrag.

Zunächst werden wir einmal die index.html um eine Auflistung für die Videos erweitern. Des weiteren wird nun auch die Datei Video.js geladen, zu der wir später noch kommen.

<!DOCTYPE html>
<html>
    <head>
        <!-- gekürzt... -->
        <script language="javascript" type="text/javascript" 
                src="app/javascript/Video.js"></script>
        <!-- gekürzt... -->
    </head>

    <body onload="Main.onLoad();" onunload="Main.onUnload();">
        <div id="sidebar">
            <div id="logo">
            </div>
            <ul id="menu">
            </ul>
        </div>
        <div id="content">
            <ul id="videolist">
            </ul>
        </div>
    </body>
</html>

Für die Videos selbst nehmen wir das ul-Element, da wir ja auch eine Auflistung haben.

Selbstverständlich gibt es für die beiden Dinge auch schon ein wenig CSS-Code, mit dem wir die Auflistung positionieren. Auch die berühmten Auflistungspunkte müssen noch ausgeblendet werden. Schreibt also folgendes am Ende der Main.css:

#content{
    position:absolute;
    left:25%;
    top:0;
    right:0;
    bottom:0;
    padding:15px;
    padding-left:45px;
}
#videolist{
    list-style-type:none;
}

Kommen wir nun zu der bereits eingebunden app/javascript/Video.js. Diese JavaScript-Klasse repräsentiert ein einzelnen Video. Darin enthalten sind Titel, Autor, Preview-Bild sowie eine Url zum Abspielen des Bildes:

function Video()
{
    this.title = "";
    this.author = "";
    this.previewImage = "";
    this.playUrl = "";
    
    /**
     * Gibt den Code zurück,
     * der den Video-Teaser anzeigt
     */
    this.GetTeaserCode = function()
    {
        return '<li class="video_teaser">'
                + '<a href="' + this.playUrl + '" class="image" '
                    + 'style="background-image:url('' + this.previewImage + '')"></a>'
                + '<h2>' + this.title + '</h2>'
                + '<div class="author">' + this.author + '</div>'
             + '</li>';
    };
    
}

Interessant hierbei ist die Einbindung des Vorschaubildes. Statt den img-Tag zu nutzen lege ich hier ein Hintergrundbild an. Der Vorteil dabei ist, dass man dies sehr gut mit CSS positionieren kann.

Nun müssen die Videos noch in der App erscheinen. Das machen wir temporär erstmal in der Menu.js. In einem späteren Teil des Tutorials müssen die Videos sowieso noch übers Internet nachgeladen werden. Ich nehme einfach immer 6 Videos, mit dem Namen der Kategorie und danach eine fortlaufende Zahl:

//... gekürzt ...
    
    //Lädt Dummy-Videos in die App,
    //später werden diese natürlich online abgerufen.
    var loadDummyVideos = function()
    {
        document.getElementById('videolist').innerHTML = "";
        
        //6 Videos hinzufügen
        for(var i = 1;i<=6;i++)
        {
            //Video erstellen
            var video = new Video();
            video.title = this.title + " " + i;
            video.author = "Stefan Wienströer";
            video.playUrl = "/tutorial-smart-tv-app-entwickeln/";
            video.previewImage = "http://www.contentlion.de/content/uploads/doku/seite-anlegen-525.jpg";
    
            document.getElementById('videolist').innerHTML += video.GetTeaserCode();
        }
    };
    
    
    //SEO
    var seo = new MenuEntry();
    seo.title = "SEO";
    seo.OnActivate = loadDummyVideos; 
    this.AddEntry(seo);
    
    //Social Media
    var socialmedia = new MenuEntry();
    socialmedia.title = "Social Media";
    socialmedia.OnActivate = loadDummyVideos; 
    this.AddEntry(socialmedia);
    
    //Entwickler
    var developer = new MenuEntry();
    developer.title = "Entwickler";
    developer.OnActivate = loadDummyVideos; 
    this.AddEntry(developer);
    
    //CMS
    var cms = new MenuEntry();
    cms.title = "CMS";
    cms.OnActivate = loadDummyVideos; 
    this.AddEntry(cms);
    
//... gekürzt ...

Im Endeffekt wird einfach nur eine Schleife durchlaufen, die das innerHTML setzt. Das OnActivate aus dem letzten Beitrag lädt nun hier die Videos. Auch die Kategorien habe ich angepasst. Ich muss hierfür noch einige Videos heraussuchen (wer noch Vorschläge hat, einfach melden).

Im letzten Schritt für heute müssen wir das Ganze auch noch ein wenig schön machen – Na klar, mit CSS! Also erweitern wir unsere Main.css um ein paar weitere Zeilen:

.video_teaser {
    font-weight:lighter;
    float:left;
    padding-right:15px;
    height:250px;
}
.video_teaser .image{
    width:200px;
    height:150px;
    background-color:#000;
    display:block;
    border: 1px solid #fff;
    background-size: auto 100%;
}
.video_teaser h2{
    margin-top:5px;
    color:#b00000;
    font-size:1.3em;
    font-weight:lighter;
}
.video_teaser .author{
    font-weight:lighter;
    font-size:1em;
    font-style:italic;
}

Durch das float platzieren wir die Videos nebeneinander und mit background-size werden die Hintergrundbilder so gesetzt, dass sie das Bild ausfüllen. Derzeit werden noch feste Pixelangaben genutzt, diese müssen später auch noch ersetzt werden.

Download aktueller Stand

Ein Video des Aktuellen Stands gab es bereits oben. Hier könnt ihr auch die Dateien herunterladen.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Videos auflisten (Smart TV App)

Download aktueller Stand

Über uns

Cookie-Einstellungen