gfycat / gfycat.js Goto Github PK

View Code? Open in Web Editor NEW

62.0 12.0 22.0 166 KB

Embed script to generate gfycat embeds on 3rd party websites

License: Other

JavaScript 96.92% HTML 3.08%

gfycat.js's Introduction

#gfycat.js

####Version History:

0.1: Initial revision
1.0: Fixes to initialization, cleaned up UI, support for mobile browsers
1.1: Support for autoplaying looping MP4 on iOS 10, GIF view count analytics
1.2: New options: data-hd, data-playback-speed; Custom classes can be added to root element before init

Embed script to generate gfycat embeds on 3rd party websites.

The intent of this Javascript file is to provide a simple way for web publishers to include Gfycat embeds on their websites.

This code is provided on Github, so users can request changes, contribute code, or fork a branch. Please contribute to the project to help improve it with actual real world needs.

###Usage:

Include this script on your webpage right after the opening <body> tag

  <script>
      (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "https://assets.gfycat.com/gfycat.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'gfycat-js'));
  </script>

Include an embed tag(s)

Example:

<div class="gfyitem" data-title=true data-autoplay=false data-controls=true data-id="BestYellowishElephantseal"></div>

The options are:

data-id: the Gfycat id (required)
data-controls: include controls for pause/speed/etc (default: false)
data-title: show the title on hover (default: false)
data-autoplay: automatically start playback on page load (default: true)
data-expand (DEPRECATED, please use data-responsive): expand video element to fill the space of its container (default: false)
data-responsive: expand video element to fill the space of its container (default: false)
data-max-height (works only together with data-responsive=true): set height upper bound for a responsive video
data-optimize: play videos when they're 50% visible, and lazy loads gifs (default: true)
data-gif: load .gif file instead of video (default: false)
data-hd: load high quality video (default: true)
data-playback-speed: set video playback speed, values from the interval [0.125, 8] (default: 1)

###Source code

The code is broken down into two files:

gfyCollection.js: gfyCollection calls gfyCollection.init() after the script is loaded. Its function is to find every Gfycat embed on the page and create a gfyObject for it.
gfyObject.js: a new gfyObject instance is created for each gfycat embed. It contains all of the functions to generate the DOM and manipulate the video.

gfyCollection.init should be called on gfyitem elements which appear on the page after the page load.

The default key the embed script looks for is class="gfyitem", or the class specificed in gfyCollection.init('classname').

Each instance of gfyObject has an init method. It's possible to initialize an object with new data.

html:

<div class="gfyitem" id="BestYellowishElephantseal"></div>

js:

gfyCollection.init();
var collection = gfyCollection.get();
collection[0].init({id: "BareSecondaryFlamingo"});

###Build

npm install
gulp build

###Testing gulp test - runs all the tests once

gulp tdd - watching for file changes and runs all the tests

gfycat.js's People

Contributors

Stargazers

Watchers

gfycat.js's Issues

Existing classes on div are deleted

Because a new div is created that replaces the original at https://github.com/gfycat/gfycat.js/blob/master/js/gfyObject.js#L227 it seems that it's impossible to set the class of the embeded gfycat without javascript. E.g. in

<div class="myStyle gfyitem" data-title=true data-autoplay=true data-controls=false data-expand=false data-id="BleakLinearHen" ></div>

The myStyle class will be omitted from the resulting div.

Autoplay not firing in a scrollable position absolute box

Hey folks,

I've been doing a rework on my site using the now-ever-so-popular static sidebar and position absolute scrollable box with site content in. I've found this is blocking gfycat embeds from autoplaying, assuming because it's not detecting the video scrolling into view?

Adjusting the viewport in anyway (opening developer tools, resizing page) does fix this.

Would assume the easiest fix is rewriting how that scrollable box works, unless you might know of a way to fix this?

Example is currently live here, under the 'Destiny' heading. https://getignited.github.io/blog/top-five-game-interfaces

Cheers!

Add loading indicator

Please :)

Gifs not showing at all in firefox

Heyo, I tried adding the script via the given url (https://assets.gfycat.com/gfycat.js), but the network tab didn't show it loading it at all. Downloading the file and loading it from the local path works. But now, even though the script is loading, it doesn't load the gif.

Here's how I've attempted to place it in html:

<img class='gfyitem' data-id='BestYellowishElephantseal'>

Also tried:

<div class="gfyitem" data-title=true data-autoplay=false data-controls=true data-expand=false data-id="BestYellowishElephantseal" ></div>

But neither of these loads anything. In both cases, the div just shows up empty on the page. The console does print out "0" and then "BestYellowishElephantseal", but nothing on the page.

Should note that this only happens in firefox. Works fine in chromium and chrome. Not sure about IE and safari and opera.

Play 2 videos on iOS10 at the same time

Need a way to choose playback speed from the js embed

RIght now you can't set the playback speed (well, if there's a way, it's not documented)

For example, I wanted to embed an gfycat on my page and set its playback speed to 0.5 at start.

Something like:

<img class="gfyitem" data-speed="0.5" data-id="SmoothInfamousFirefly"/>

would be fine.

Using old API endpoint to fetch gifs.

The call to get gifs is using an endpoint that seems to have been retired:

loadJSONP("https://gfycat.com/cajax/get/" + gfyId, function (data) {

The cajax/get/ endpoint returns a 404 as of recently.

Here's the line of code.

Conflict with lightbox JS on website

This JS is conflicting with a lightbox JS on my site. Screenshot of error here: http://i.imgur.com/66p2KJ3.png

Any way to fix this so they both work in harmony?

Some don't load on page with multiple GFYCAT

I have a page that has 17 GFYCAT embeds on it. The embed works fine with 1-2. After that I loaded all of them, and some of them don't work. They are all set to not autoplay.

There are multiple issues:

Some don't play at all (preview image only, no play button).

Some have play button but:

won't play all the way through
or will play all the way through but won't loop.

Others work fine.

I'm using the current version of the code.

Project should be marked clearly as deprecated/non-functional

Due to #25 this library doesn't currently work - see also https://www.reddit.com/r/gfycat/comments/a17ewc/embeded_gfycats_returning_failed_to_load_resource/

Auto load ceased working

Auto load ceased working, since yesterday I believe.
It only plays/stops currently visible video automatically.
When window is resized it loads automatically. But only the visible ones. It looks like it is unable to detect when video enters/exits viewport.

Below is the Chrome log for when video is clicked:

cs.js:11 ---------- mouse down ------------------
cs.js:11 ---------- mouse up --------------------
cs.js:11 ---------- mouse down ------------------
cs.js:11 ---------- mouse up --------------------
(index):1 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). https://goo.gl/LdLk22
Promise (async)
P @ gfycat.js:16
T @ gfycat.js:16

Does not work in Internet Explorer (11)

It appears that Internet Explorer is not compatible with the gfycat.js embedding script. I'm currently getting an error in the developer console:
SCRIPT5009: 'Promise' is undefined
gfycat.js (16,9228)

According to caniuse.com (http://caniuse.com/#feat=promises) It looks like IE does not have Promise support, and thus a polyfill is required.

I see two ways forward - one is to document this requirement, the other is to include the polyfill in the gfycat.js script file.

gfycat / gfycat.js Goto Github PK

gfycat.js's Introduction

gfycat.js's People

Contributors

Stargazers

Watchers

Forkers

gfycat.js's Issues

Recommend Projects

Recommend Topics

Recommend Org