【问题标题】:Instagram feed that plays videos播放视频的 Instagram 提要
【发布时间】:2015-11-26 00:22:42
【问题描述】:

我创建了一个 Instagram 提要,它使用主题标签提取图像和视频。我知道在我的手机上查看 Instagram 的形式,视频正在被拉入我使用 JavaScript 完成此操作是否可以在我的网站上播放视频而无需打开另一个窗口谢谢

更新

到目前为止我的 JavaScript

var feed = new Instafeed({
    clientId: '467ede5a6b9b48ae8e03f4e2582aeeb3',
    limit: 16,
    get: 'tagged',
    tagName: 'teamRousey',
    sortBy: 'most-recent',
    after: function () {
        var images = $("#instafeed").find('a');
        $.each(images, function(index, image) {
            var delay = (index * 75) + 'ms';
            $(image).css('-webkit-animation-delay', delay);
            $(image).css('-moz-animation-delay', delay);
            $(image).css('-ms-animation-delay', delay);
            $(image).css('-o-animation-delay', delay);
            $(image).css('animation-delay', delay);
            $(image).addClass('animated flipInX');
        });
    },
    template: '<video controls ><source src="{{video}}embed/" type="video/mp4"></video>"<div class="likes">&hearts; {{likes}}</div>'
});

feed.run();

【问题讨论】:

  • 愚蠢的问题值得愚蠢的回答:是的,有可能
  • 嗯,这对我来说不是一个愚蠢的问题,因为我不知道这就是为什么我问这很难做到可以通过javascript完成
  • 向我们展示您目前所获得的成果。
  • 基本上。 1)获取视频src。 2)在&lt;video&gt;标签中播放它
  • 我明天可以帮助你如果你在阅读this 后仍然需要帮助,或者其他人没有帮助你。但是这里是凌晨 2 点,我现在要睡觉了。你知道它是视频还是图像,所以它是可行的

标签: javascript html instagram


【解决方案1】:

我们开始吧。

jQuery(function($){

    var feed = new Instafeed({
        clientId: '467ede5a6b9b48ae8e03f4e2582aeeb3',
        limit: 16,
        get: 'tagged',
        tagName: 'teamRousey',
        sortBy: 'most-recent',
        after: function () {
            
        },
        resolution: 'standard_resolution',
        filter: function(image) {
            if (image.type == 'image') {
                image.template = '<img src="' + image.images.standard_resolution.url + '" />';
            } else {
                image.template = '<video width="100%" controls loop><source src="' + image.videos.standard_resolution.url + '" type="video/mp4"/></video>';
            }
            return true;
        },
        template: '<header>{{model.template}}</header><footer><a href="http://instagram.com/{{model.user.username}}">@{{model.user.username}}</a><br>{{caption}}</footer>',

    });

    feed.run();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://jsonp.afeld.me/?url=http%3A%2F%2Finstafeedjs.com%2Fjs%2Finstafeed.min.js"></script>
<div id="instafeed"></div>

【讨论】:

  • 非常感谢非常感谢我尝试投票支持您的答案,但我没有足够的代表点,但我感谢您的帮助
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-02-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-07-09
  • 2013-01-04
相关资源
最近更新 更多