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();

            });
        }
    });
});

我已经创建了一个 jsfiddle 以及所有代码和一些虚拟数据，任何建议都会非常有帮助:)

Answer 1

我认为您实际上并不需要在数组中存储条目以获取增量 ID，只需使用相对于当前选择的元素索引即可。另外，我做了一些外观上的改进，并为您的 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();
            }));
        }
    });
});