Question

我从Amazon S3存储桶中的目录中获取密钥。其中一些键是通过弹性转码器的视频。键的格式如下：

OWNERNAME /视频/ Wildlife_123abcABC / HLS_1M_.m3u8

OWNERNAME /视频/ Wildlife_123abcABC / HLS_2M_.m3u8

OWNERNAME /视频/ Wildlife_123abcABC / HLS_400K_.m3u8

OWNERNAME /视频/ Wildlife_123abcABC / 123abcABC.mp4

OWNERNAME /图像/ someImage.png

我想要发生的是使用li使用Javascript和HTML在网页上显示密钥。最终，我希望它看起来像这样：

OwnerName
|-->video
|------>Wildlife_123abcABC
|---------->HLS_1M_.m3u8
|---------->HLS_2M_.m3u8
|---------->HLS_400K.m3u8
|---------->123abcABC.mp4
|-->image
|------>someImage.png

就我的代码而言，这就是它目前的样子：

function displayURL(url, fileName){
    var filePath  = fileName.split("/");
    var type      = filePath[1];
    content       = fileName.split(".");
    var ext       = content[content.length - 1];

    var li        = [];
    var a         = [];

    //var li          = document.createElement('li');
    //var a           = document.createElement('a');

    for(var i = 0; i < filePath.length; i++){
        li[i] = document.createElement('li');
        a[i] = document.createElement('a');

        li[i].className  = "file";
        li[i].id = filePath[i];
        //a[i].href       = url;
        a[i].innerHTML = filePath[i]+"</br>";
        li[i].appendChild(a[i]);
    }

    //li.className  = "file";
    //a.href      = url;
    //a.innerHTML = fileName+"</br>";
    //a.innerHTML   = url+"</br>";
    //li.appendChild(a);

    switch(type){
        case 'image':
            var img = document.createElement("img");
            img.src = url;
            img.width = 100;
            img.height = 100;
            li.appendChild(img);

            _("url_image").appendChild(li);
            break;
        case 'video':
            if((ext != "ts") && (ext != "png"))
                for(var j = 0; j < filePath.length; j++){
                    if(j === 0)
                        _("url_video").appendChild(li[j]);
                    else
                        li[j-1].appendChild(li[j]);
                }
            break;
        default:
            _("url_other").appendChild(li);
            break;
    }
}

到目前为止，我一直专注于让视频部分正常工作。

杰里

视频

Wildlife_eaQUuiN7aBKzAfC

HLS_1M_.m3u8

杰里

视频

Wildlife_eaQUuiN7aBKzAfC

HLS_2M_.m3u8

杰里

视频

Wildlife_eaQUuiN7aBKzAfC

HLS_400K_.m3u8

杰里

视频

Wildlife_eaQUuiN7aBKzAfC

eaQUuiN7aBKzAfC.mp4

杰里

视频

supercat_Ta8QbSUnQW5WlqF

HLS_1M_.m3u8

杰里

视频

supercat_Ta8QbSUnQW5WlqF

HLS_2M_.m3u8

杰里

视频

supercat_Ta8QbSUnQW5WlqF

HLS_400K_.m3u8

杰里

视频

supercat_Ta8QbSUnQW5WlqF

Ta8QbSUnQW5WlqF.mp4

列出从S3存储桶返回的键/ url（HTML5 / PHP）

0 个答案: