HMTL 5 video player con lista video da feeds di YouTube

Posted by: Marco Nardi Posted date: November 24, 2011 In: Ajax, Html, Javascript, Jquery | comment : 2

Ho creato un video player utilizzando l’iframe che mette a disposizione YouTube con la classe youtube-player.

Questo video player è in HTML 5 e Javascript ( jQuery ). Carica gli standard feeds da YouTube e visualizza una lista dei video in base ad alcuni criteri: Most Viewed, Top Rated, Recently Featured, Most Discussed, Top Favorites, Most Responded e Most Recent.

Molto utile per imparare a lavorare con Javascript, HTML 5 e il player video di YouTube.

HTML 5

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>

<title>JQuery YouTube feeds</title>
</head>

<body onLoad="init()">
    
    <section>
        <header>
            <h3>JQuery YouTube feeds | example by FlepStudio</h3>
        </header>
    
        <div id="wrapper">
            <div id="leftcolumn">
                
            </div>
            
            <div id="rightcolumn">Standard feeds
                <form name"myForm" method="GET" action="">
                    <select name="myList" onchange="checkResult(this.form)" id="combobox">
                        
                    </select>
                </form>
                
            <div id='mycustomscroll'>
                
            </div>
            
            </div>
        </div>
    
        <footer>
            
        </footer>
    </section>

</body>

</html>

CSS

body
{
    font-family: 'Droid Sans', 'Arial', sans-serif;
    color: #6F7986;
    font-size: 14px;
}

header
{
    text-align: center;
}

footer
{
    
}

select
{
    width: 240px;
}

#wrapper 
{ 
    margin: 0 auto;
    width: 960px;
}

#leftcolumn 
{ 
    color: #333;
    border: 1px solid #ccc;
    background-color: #F2F2E6;
    margin: 10px 5px 10px 0px;
    padding: 10px;
    height: 385px;
    width: 640px;
    float: left;
}

#rightcolumn 
{
    display: inline;
    position: relative;
    float: right;
    color: #666;
    border: 1px solid #ccc;
    background-color: #F2F2E6;
    margin: 10px 0px 10px 0px;
    padding: 10px;
    height: 385px;
    width: 265px;
}

#mycustomscroll 
{
    list-style: none;
    height: 325px;
    overflow: auto;
    position: relative;
    background-color: #F2F2E6;
    margin: 0.3em auto;
    
    font-size: 12px;
}

#mycustomscroll li
{
    font-size: 12px;
    width: 230px;
    background-color: #333;
    color: #CCC;
    padding: 5px;
    margin: 1px;
    cursor: pointer;
}

#mycustomscroll a
{
    text-decoration: none;
}

#mycustomscroll a:hover li
{
    background-color: #6F7986;
    color: #FFF;
}

Javascript e jQuery

// properties
var URL_YOUTUBE_FEEDS="http://gdata.youtube.com/feeds/api/standardfeeds/";
var labels=new Array("Most Viewed", "Top Rated", "Recently Featured", "Most Discussed", "Top Favorites", "Most Responded", "Most Recent");
var values=new Array("most_viewed", "top_rated", "recently_featured", "most_discussed", "top_favorites", "most_responded", "most_recent");
var videos_id=new Array();

// init the application
function init()
{
    // populate combobox
    for( var i = 0; i < labels.length; i++ )
    {
        $("#combobox").append('<option value="'+values[i]+'">'+labels[i]+'</option>');
    }
    
    // loadFeed call
    loadFeed(values[0]);
}


// check selected item
function checkResult(form)
{
    // empty left column
    $("#leftcolumn").empty();
    
    // get id and value of selected item
    var id = form.myList.selectedIndex;
    var result = form.myList.options[id].value;
    
    //loadFeed call
    loadFeed(result);
}


// load YouTube feed
function loadFeed(identifier)
{
    // new empty array
    videos_id=new Array();
    
    // empty mycustomscroll and left column
    $("#mycustomscroll").empty();
    $("#leftcolumn").empty();
    
    // use ajax to load the feed
    $.ajax({
        type: "GET",
        url: "php/proxy.php?url="+URL_YOUTUBE_FEEDS+identifier,
        dataType: "xml",
        
        // success function
        success: function(xml) 
        {
            // append <ul>
            $("#mycustomscroll").append('<ul>');
            
            // loop for each entry
            $(xml).find('entry').each(function looping(value)
            {    
                // get video id
                var id=$(this).find("link").attr("href");
                var video_id = id.split('v=')[1];
                var ampersandPosition = video_id.indexOf('&');
                if(ampersandPosition != -1)
                    video_id = video_id.substring(0, ampersandPosition);
                // push id into array
                videos_id.push(video_id);
                
                // append list of items
                $("#mycustomscroll").append('<a><li id="item"><strong>'+(value+1)+"</strong><br/><strong>Title: </strong>"+$(this).find("title").text()+"<br/><strong>Published: </strong>"+$(this).find("published").text()+"<br/><strong>Author: </strong>"+$(this).find("author").find("name").text()+'</li></a>');
            });
            
            // append </ul>
            $("#mycustomscroll").append('</ul>');
            // append iframe video player
            $("#leftcolumn").append('<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/'+videos_id[0]+'" frameborder="0"></iframe>');
            
            addListeners();
        }
    });
}


// add <li> listener
function addListeners()
{
    // loop for each list item
    $('#mycustomscroll li').each(function looping(index) 
    {
        // onclick...
        $(this).click(function onItemClick() 
        {
            // empty left column
            $("#leftcolumn").empty();
            // append iframe video player
            $("#leftcolumn").append('<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/'+videos_id[index]+'" frameborder="0"></iframe>');
        });
    });
}

DEMO

Files sorgente:

Youtube feeds and video player with video list (6.6 KiB, 504 hits)

Sponsors of this article

‹ Previous Next ›

About The Author

Marco Nardi

WebMaster

CEO e amministratore Network Flepstudio.org

Number of Entries : 85

Comments (2)

Lingyong Sun

16.08.12 at 22:31

Risolto il problema, a parte il fatto che ho visto il link delle sorgenti in fondo all’articolo, la richiesta fatta a youtube restituisce alla fine un file atom che e’ un xml quindi non e’ necessario l’uso il file php, anche se mi da qualche problema perchee lo split con v= puo generare problemi causato dal fatto che allcuni link trovati non lo contengono e ho dovuto risolverlo aggiungendo una if che setta in modo diverso video_id quando il link restituito e’ diverso da come si aspetta il programma.
if( !video_id ) {
var tmp = id.split(‘/’);
var video_id = tmp[tmp.length-1];
}
solo che qui inizialmente volevo semplicemente saltare un ciclo con if(!video_id){return;}, ma con mia grande sopresa alla fine mi ritrovo sempre con lo stesso numero di video 25.
per cercare di capire cosa succede allora ho inserito dei contatori di cicli totali dell’each, quelli avvenuti internamente alla if e quelli dopo la if, e ho visto che il return dentro la if funziona( se non avesse funzionato si sarebbe fermato ) e dentro le variabili avevo tot 25, inIf 22, outIf 3, ma controllando il risultato nel browser ho 25 filmati come mai? con la istruzione di return dovrei avre saltato tutto il codice dopo e quindi dovrebbero essere semplicemente 22 la lista dei video.

Reply
- Lingyong Sun
  
  16.08.12 at 23:35
  
  errore i video caricati non sono veramente 25, ma il numero mi ha ingannato senza contarli veramente. Scusate.
  Pero navigando dentro il dom per cercare dove il trovare il falso errore ho notato una cosa stranissima, che a causa del che avvolge i per il dom l’elemento risulta completamente vuota, mentre ha tanti fratelli quanti sono quelli caricati da each che al suo interno hanno degli elementi producendo un equivalente in html di che non sarebbe corretto.
  Si potrebbe invertire gli con i nel codice e poi settare appropriamente il css.
  E poi pensavo che potrebbe essere piu facile inserire gia dentro HTML sia iframe che ul, in modo da non doverli ricreare in script, e magari creare anche gia un template degli in modo che dopo basta semplicemente clonare il template e cambiare i valori al suo intero ( magari sostituendo anche il id=”item” con class=”item” ) , e forse si riuscirebbe a evetare di richiamare il parsere html ma gestito solo a livello dom.
  
  Reply