agregar subitems a galería HTML5

[cualquiera]

hola amigos econtre este script donde genera una galería de vídeos en html 5 todo bien pero el xml que genera o la estructura que genera es de esta maneara primero coloco el script que genera el xml y la galería y luego coloco el xml generado

Código Javascript:

<script type="text/javascript">
// properties
var XML_PATH = "xml/01.xml";
var video_width;
var video_height;
var videos_array=new Array();
// init the application
function init()
    {
// call loadXML function
    loadXML();
    }
// XML loading
function loadXML()
{
    $.ajax({
            type: "GET",
            url: XML_PATH,
            dataType: "xml",
            success: function onXMLloaded(xml) 
            {
                // set video_width and video_height
                video_width=$(xml).find("videos").attr("width");
                video_height=$(xml).find("videos").attr("height");
                
                // loop for each item
                $(xml).find('item').each(function loopingItems(value)
                
                {   
                    // create an object
                    var obj={title:$(this).find("title").text(), mp4:$(this).find("mp4").text(), ogg:$(this).find("ogg").text(), webm:$(this).find("webm").text(), description:$(this).find("description").text(), img:$(this).find("img").text()};
                    videos_array.push(obj);
                    
                    // append <ul> and video title
                    $("#mycustomscroll").append('<ul>');
                    $("#mycustomscroll").append('<a><li id="item">'+"<strong class='titulo'>"+obj.title+'</strong></li></a>');
                });
                
                // close </ul>
                $("#mycustomscroll").append('</ul>');
                // append video tag player
                $("#leftcolumn").append('<video width="'+video_width+'" height="'+video_height+'" controls="controls"><source src="'+videos_array[0].mp4+'" type="video/mp4" /><source src="'+videos_array[0].ogg+'" type="video/ogg" /><source src="'+videos_array[0].webm+'" type="video/webm" />Your browser does not support the video tag.</video>');
                // append description
                $("#description").append(videos_array[0].description);
                
                // call addListeners function
                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 and description
            $("#leftcolumn").empty();
            $("#description").empty();
            // append video tag
            $("#leftcolumn").append('<video width="'+video_width+'" height="'+video_height+'" controls="controls" autoplay="autoplay"><source src="'+videos_array[index].mp4+'" type="video/mp4" /><source src="'+videos_array[index].ogg+'" type="video/ogg" /><source src="'+videos_array[index].webm+'" type="video/webm" />Your browser does not support the video tag.</video>');
            // append description
            $("#description").append(videos_array[index].description);
        });
    });
}
</script>
 

Código HTML:

<?xml version="1.0" encoding="UTF-8"?>
<videos width="550" height="368">
    <item>
        <title>mi titulo</title>
        <mp4>http://css.flepstudio.org/demo/video_player/assets/videos/21_Jump_Street.mp4</mp4>
        <ogg>http://css.flepstudio.org/demo/video_player/assets/videos/21_Jump_Street.ogv</ogg>
        <description><![CDATA[<ul><li>texto en viñetas</li></ul>]]></description>
    </item>
</videos>
 

ok esa estrucrura y ese xml generado me da eseresultado y mecrea un item por video con su titulo y descripcion, lo que me piden es poder generar como a cada item como un subitem, algo asi com una estructura de arbol algo asi

1.nombre 1
1.1. subnombre1
1.2. subnombre2
2 nombre 2

y así sucesivamente es posible gracias y dejo los codigos

gracias.