如何从其他html文件更改加载的视频源?

时间:2017-01-25 17:54:27

标签: javascript jquery html html5 video

基本上我是一个html文件,其中包含我的网络应用视频所需的所有元素。 所以,我现在处于需要计算用户视频数量并向用户显示的位置。

脚本:

for(var i=1;i<(s.length)-2;i++){
    $('#vid_c_'+i).append('<div id="vid_'+i+'"></div>');
    $("<div>").load("video_content.html",function(index) {
        return function() {
            $(this).find('.video').attr({id: 'video_id_'+index});
            $("#vid_"+index).append($(this).html());
        }
     })(i));

     var myElem = document.getElementById('video_id_'+i);
     if (myElem === null) alert('does not exist!');
     $(this).find('#video_id_'+i).attr('src', video_src[i-1]);
     console.log(video_src[i-1]+ "    "+"#video_id_"+i);
}

基本上发生的是,for循环创建(s.length)-2,这是用户视频的数量,并在div中加载视频元素,并且对于每个视频,它指定增加i值的唯一ID。到目前为止它工作得很好我现在需要指定在video_src[i-1]中分配的视频源。

正如你所看到的那样myElem测试元素是否存在而结果就是它警告说does not exist即使我已经加载了我的视频元素而且我可以看到它在我的浏览器检查模式下,ID分配正常,这使得分配视频源的下一行不起作用。我也试过了:

$(this).find('.video').attr({id: 'video_id_'+index, 'src': video_src[i-1]});

并且.load()函数video_src内部显示未定义。

在我的console.log中,它会显示需要分配的确切视频来源。

所以如果有人告诉我每次从我的video_content.html文件加载视频元素时如何分配视频源,我真的很感激。

1 个答案:

答案 0 :(得分:0)

仅仅因为你不知道答案并没有强迫你对这个问题进行投票。

无论如何,基于我的所有研究和测试,我在.load(function(){});内部出现了我无法访问当前页面的数据,因为它正在执行我video_cntent.html的脚本文件。所以为了设置我的视频元素的来源,我为循环创建了两个:

for(var i=1;i<(s.length)-2;i++){
    var video_src = video_source[i-1];
    localStorage.setItem('Item_'+i, video_src);
    $('#vid_c_'+i).append('<div class="move_2" id="vidi_'+i+'"></div>');
}

for(var i=1;i<(s.length)-2;i++){
    $("<div>").load("video_cntent.html",(function(index) {
     return function() {
        var retrieveitem  = localStorage.getItem('Item_'+index);
        $(this).find('#vidi_'+index).attr({id: 'video_id_'+index, 'src': retrieveitem});
        }
     })(i));
}

正如您在第一个循环中看到的那样,我正在访问video_source并将其存储在localStorage中,并根据i的值存储我的所有视频来源。

在我的第二个循环中,我根据i的值再次检索所有存储的数据,并使用它来设置我的视频元素的来源。

为我工作,思想可能有助于下一代。