从json文件获取视频源和数据的视频播放器

时间:2015-12-15 12:47:47

标签: javascript json html5-video

尝试构建一个从json文件获取视频数据的视频播放器,即src&标题。在视觉上,它将是一个下面有3个链接的玩家,在点击时将不同的视频加载到播放器中。

到目前为止我的代码是:

(Some Guy )-( Cool Song )[FooBar Release]

目前我无法将底部3个瓷砖加载到播放器中? 任何指针都将非常感谢....

1 个答案:

答案 0 :(得分:0)

根据我们的评论,以下内容应该这样做;

var callback = function (text, video) {
        parsedData = JSON.parse(text);
        console.log('parsed', parsedData)
        conUrlCount = video;
        //after load play the first video
        playNext();
};

   function loadFunction(video) {
        //returning json data
        //ajax.get("clips.json", callback);

        //simulate
        getAjax(callback, video);
    }

    //to simulate
function getAjax(callback, video) {
    setTimeout(function () {
        callback(JSON.stringify([{
            "id": "vid1",
            "name": "#",
            "description": "#",
            "content-url": "video1.mp4",
            "thumb-url": "#"
        }, {
            "id": "vid2",
            "name": "#",
            "description": "#",
            "content-url": "video2.mp4",
            "thumb-url": "#"
        }, {
            "id": "vid3",
            "name": "#",
            "description": "#",
            "content-url": "video3.mp4",
            "thumb-url": "#"
        }, {
            "id": "vid4",
            "name": "#",
            "description": "#",
            "content-url": "video4.mp4",
            "thumb-url": "#"
        }]), video)
    }, 100)
}

document.getElementById("vid1").addEventListener("click", loadFunction(0));
document.getElementById("vid2").addEventListener("click", loadFunction(1);
document.getElementById("vid3").addEventListener("click", loadFunction(2));

注意更改的功能。我已经为你的回调添加了一个视频变量来发出需要播放的视频的信号。您可以随时使用loadFunction(0)来调用此内容(包括页面加载)。