javascript - OOP访问html5视频变量

Question

在 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，并且收到:未捕获的类型错误:无法读取未定义的属性“currentSrc”。

Answer 1

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