CODEWITHSUNDEEP
reactjs
Glutch
Glutch

Reputation: 720

Displaying gifv with react

I've been trying to view the imgur format gifv for a while but i just cant seem to get it working.

Been testing with img tags, video tags, iframes. So far only the iframe seems to work - but i cant resize the iframe due to browser limitations.

<img src="http://i.imgur.com/rCkPdZm.gifv" /> - nope
<video src="http://i.imgur.com/rCkPdZm.gifv"/> - nope

Any tips on how to display for example http://i.imgur.com/rCkPdZm.gifv

Thanks!

Upvotes: 0

Views: 618

Answers (1)

pawel
pawel

Reputation: 36995

A gifv is not an image format, it's a made-up "extension" to make the landing page look like you have opened an image link directly, while being able to stream video instead of a much larger gif file. Use the "view source" option and go find out! :)

You can right-click on the gifv "image" and the browser should give you an option to "copy video url", which you can then use in a <video> element:

<video src="http://i.imgur.com/rCkPdZm.mp4" />

https://jsfiddle.net/xc4cqoh5/

In this context it doesn't matter if it's React or just plain HTML website, the solution is the same: you need to grab the URL of the actual video being played, not the gifv page that embeds it. It seems you can just replace the .gifv extension with .mp4. To make this answer relevant to the reactjs tag here's an example:

const Player = props => {
   let videourl = props.videourl.replace('.gifv', '.mp4');
   return <video src={ videourl } />;
};

ReactDOM.render( <Player videourl="http://i.imgur.com/rCkPdZm.gifv" />,
 document.getElementById('container'));

http://jsfiddle.net/69z2wepo/47077/

Upvotes: 2

Related Questions