Vimeo API -下载视频

Question

我对jQuery和JavaScript有一点了解，但在优化方面，我有点软弱，但我愿意学习新的东西。

当用户单击适当的图像区域时，我正在从Vimeo将视频加载到我们的站点上。这是很好的工作，但我觉得这不是一个完全表演的方式去做它。

有人看到我下面写的代码有什么问题可以做得更好吗？

JS

var videoData = [
{
    'player_id':'video1',
    'videoURL':'<?php the_field('two_vimeo_video_url'); ?>',
    'width':'1000',
},
{
    'player_id':'video2',
    'videoURL':'<?php the_field('six_vimeo_video_url'); ?>',
    'width':'1000',
}];

function loadVideo(target, videoid) {
    $.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent(videoData[videoid]['videoURL']) + '&api=1&player_id='+ videoData[videoid]['player_id'] +'&width='+videoData[videoid]['width']+'&byline=0&color=ffffff&title=0'+'&callback=?', function(data){

        $(target).find('.video-container').html(data.html); // puts an iframe embed from vimeo's json

        $(target).closest('iframe').load(function(){

            $f(player).addEvent('ready', function(id){
                var vimeoVideo = $f(videoid);
            });
        });
    });
}

$(function(){
    // Create array to store values
    var vimeoArray = [];
    var videoContainer = $('.video-container');

    // loop through st
    $(videoContainer).each(function(index, value) {

        // get the image with the data attr on each loop
        var dataAttr = $(this).attr('data-video');

        // if dataAttr is not false
        if ( dataAttr !== undefined) {

            // push data attribute value into array
            vimeoArray.push(dataAttr);

            // Store last element of array on iteration
            var videoid = vimeoArray[vimeoArray.length-1];

            // attach click handler to the parent of the scoped element
            $(this).parent().click(function(){

                // load the video
                loadVideo(this, videoid);
                $(this).unbind('click');
                $(this).find('.b-studio__image').hide();

            });
        }
    });
});

我已经用所有的代码和一些虚拟数据创建了一个小提琴，任何建议都会非常有用:)

Answer 1

我认为您并不需要在数组中存储条目才能获得增量I，只需使用相对于当前选择的元素索引即可。此外，我做了一些美容改进，并添加了一个回调您的loadVideo功能，所以图像是隐藏后，刚刚加载视频。

var videoData = [{
    'player_id':'video1',
    'url':'http://vimeo.com/87701971',
    'width':'1000'
},
{
    'player_id':'video2',
    'url':'http://vimeo.com/73893277',
    'width':'1000'
}];

function loadVideo($target, ix, next){
    return function() {
        var video = videoData[ix];
        var path = 'http://www.vimeo.com/api/oembed.json?'+
            Object.keys(video).map(function(key){
                return key + '=' + video[key];
            }).join('&')+
            'api=1&byline=0&color=ffffff&title=0&callback=?';
        $.getJSON(path, function(data){
            $target.find('.video-container').html(data.html);
            $target.closest('iframe').load(function(){
                $f(player).addEvent('ready', function(id){
                    var vimeoVideo = $f(videoid);
                    next();
                });
            });
        });
    };
}

$(function(){
    $('.video-container').each(function(ix){
        var $cont = $(this),
            $par = $cont.parent();
        var attr = $cont.attr('data-video');
        if (typeof attr !== typeof undefined && attr !== false) {
            $par.one('click', loadVideo($par, ix, function(){
                $container.find('.b-studio__image').hide();
            }));
        }
    });
});