使用react

Question

我一直试图查看imgur格式gifv一段时间，但我似乎无法让它工作。

使用img标签，视频标签，iframe进行测试。到目前为止，只有iframe似乎有效 - 但由于浏览器的限制，我无法调整iframe的大小。

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

有关如何显示的任何提示，例如http://i.imgur.com/rCkPdZm.gifv

谢谢！

Answer 1

gifv不是图片格式，它是一个简化的“扩展程序”，使目标网页看起来像是直接打开图像链接，同时能够流式传输视频而不是更大的gif文件。使用“查看源”选项，然后找出答案！ ：）

您可以右键单击gifv“图像”，浏览器应该为您提供“复制视频网址”选项，然后您可以在<video>元素中使用该选项：

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

https://jsfiddle.net/xc4cqoh5/

在这种情况下，无论是React还是纯HTML网站，解决方案都是一样的：您需要获取正在播放的实际视频的网址，而不是嵌入它的gifv网页。您似乎可以将.gifv扩展名替换为.mp4。要使此答案与reactjs标记相关，请参阅以下示例：

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/