javascript - Instagram feed that plays videos - Stack Overflow

admin管理员组

文章数量:1024074

I have created an Instagram feed that pulls in images and videos using a hashtag. I know form looking at Instagram on my phone that the videos are being pulled in I done this using JavaScript is it possible to play the videos on my site without opening another window thanks

Update

my JavaScript so far

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

I have created an Instagram feed that pulls in images and videos using a hashtag. I know form looking at Instagram on my phone that the videos are being pulled in I done this using JavaScript is it possible to play the videos on my site without opening another window thanks

Update

my JavaScript so far

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
• html
• instagram

Share Improve this question Follow edited Nov 26, 2015 at 21:10 Endless 38.2k1313 gold badges116116 silver badges137137 bronze badges asked Nov 26, 2015 at 0:22 A KelA Kel 7511 silver badge99 bronze badges 7

• 4 Stupid question deserves stupid answer: Yes it's possible – Endless Commented Nov 26, 2015 at 0:29
• 2 Well it's not a stupid question to me because I didn't know That's why I asked is this difficult to do can it be done through javascript – A Kel Commented Nov 26, 2015 at 0:31
• 1 Show us what you got so far. – Endless Commented Nov 26, 2015 at 0:36
• 1 Basically. 1) get the video src. 2) play it in a <video> tag – Endless Commented Nov 26, 2015 at 0:37
• 1 I can help you tomorrow If you still need help after reading this or someone else dosen't helps you. But its 2AM here and i'm going to bed now. You know if it's a video or a images so it's doable – Endless Commented Nov 26, 2015 at 1:05

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 8

Here we go.

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./{{model.user.username}}">@{{model.user.username}}</a><br>{{caption}}</footer>',

    });

    feed.run();

});

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

I have created an Instagram feed that pulls in images and videos using a hashtag. I know form looking at Instagram on my phone that the videos are being pulled in I done this using JavaScript is it possible to play the videos on my site without opening another window thanks

Update

my JavaScript so far

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

I have created an Instagram feed that pulls in images and videos using a hashtag. I know form looking at Instagram on my phone that the videos are being pulled in I done this using JavaScript is it possible to play the videos on my site without opening another window thanks

Update

my JavaScript so far

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
• html
• instagram

Share Improve this question Follow edited Nov 26, 2015 at 21:10 Endless 38.2k1313 gold badges116116 silver badges137137 bronze badges asked Nov 26, 2015 at 0:22 A KelA Kel 7511 silver badge99 bronze badges 7

• 4 Stupid question deserves stupid answer: Yes it's possible – Endless Commented Nov 26, 2015 at 0:29
• 2 Well it's not a stupid question to me because I didn't know That's why I asked is this difficult to do can it be done through javascript – A Kel Commented Nov 26, 2015 at 0:31
• 1 Show us what you got so far. – Endless Commented Nov 26, 2015 at 0:36
• 1 Basically. 1) get the video src. 2) play it in a <video> tag – Endless Commented Nov 26, 2015 at 0:37
• 1 I can help you tomorrow If you still need help after reading this or someone else dosen't helps you. But its 2AM here and i'm going to bed now. You know if it's a video or a images so it's doable – Endless Commented Nov 26, 2015 at 1:05

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 8

Here we go.

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./{{model.user.username}}">@{{model.user.username}}</a><br>{{caption}}</footer>',

    });

    feed.run();

});

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

本文标签： javascriptInstagram feed that plays videosStack Overflow