OOP访问html5视频变量

时间:2014-10-14 10:28:08

标签: javascript jquery html5 oop

在OOP中,我无法访问html5视频的currentSrc变量。

if (typeof vidPlayer === "undefined") {
var vidPlayer = {};
}
vidPlayer.videoObj = $('video');
vidPlayer.videos_list = [{
        'id': 0,
        'name': '01_Main_entrance.mp4'
    }, {
        'id': 1,
        'name': '03_Meeting_of_zones.mp4'
    }, {
        'id': 2,
        'name': '04_Goods_entrance.mp4'
    }, {
        'id': 3,
        'name': '05_Tissue_cultures.mp4'
}];

vidPlayer.changeVideo = function(selector) {
    console.log(this.videoObj);
    console.log(this.videos_list);
    var url = vidPlayer.videoObj[0].currentSrc;
    var url_arr = url.split('/');
    var file_name = url_arr[url_arr.length - 1];

    for (var i = 0; i < vidPlayer.video_list.length; ++i) {
        if (vidPlayer.video_list[i].name == file_name) {
            if ($(selector).attr('class') == 'next') {
                var id = carousel(vidPlayer.video_list[i].id,vidPlayer.video_list.length - 1,'+');
                var source = 'videos/' + vidPlayer.video_list[id].name;
                loadVideo(source);
            }
            if ($(selector).attr('class') == 'prev') {
                var id = carousel(vidPlayer.video_list[i].id,vidPlayer.video_list.length - 1,'-');
                if (vidPlayer.video_list[i].id == 0) {
                    var id = vidPlayer.video_list.length - 1;
                } else {
                    var id = vidPlayer.video_list[i].id - 1;
                }
                var source = 'videos/' + vidPlayer.video_list[id].name;
                loadVideo(source);
            }
        }

    }
}

所以我无法访问属性currentSrc而我得到:未捕获TypeError:无法读取属性&#39; currentSrc&#39;未定义的。

1 个答案:

答案 0 :(得分:1)

问题可能是您在将vidPlayer对象加载到结构之前定义了所有属性。这是因为您的script包含在HTML的相关部分之前。您需要在文档就绪事件中定义事件,或者甚至在以后运行的事件中定义事件,具体取决于您如何生成html。基本上你必须确保在你的html中已经存在$('video')时调用它。