教你如何在网页中嵌入 Instagram 视频

By Apprcn

六月 28, 2013 互联酷网 No comments

Instagram 自从推出了视频拍摄以来我已经看到不少童鞋在上面拍视频了,但无奈现在还没有工具可以让 Instagram 的视频嵌入到网页中去。不过其实只要动动手,还是可以做到的,今天我就教大家来嵌入 Instagram 视频到网页中去。

7月11日 Update:现在官方已经有分享功能了,只需要点击分享按钮就会有官方的分享代码。

首先需要得到视频的地址,这个很简单,在视频页面查看源文件。(本文以 Chrome 为演示浏览器,其他浏览器也是差不多的操作。)



在源文件页面搜索 video ,得到视频的源地址,还有在地址下面获得封面图片的地址,记录下来。

然后打开 http://sandbox.thewikies.com/vfe-generator/ ,将相应的地址填进去,「MP4 Video」 里填写视频地址,「Ogg」 和 「WebM」 两项留空,「Poster Image」 填封面图片地址,可以不填写,实测如果填写后在嵌入的视频下方会多了一幅图片,「Fallback Title」 填写标题。下面的 「Height」 和 「Width」 是高度和宽度,Instagram 默认的是 640×640 ,我就建议你视乎嵌入网页的宽度而定,像我嵌入在下面的视频就是 580×580 的了。下面的 「Embed as」 中选择播放器的类型,想要多设备通吃的就选择 「HTML5+Flash」 。

页面下方的代码会随着你的修改而修改,当你设置好后就可以用下面的代码嵌入到页面中了。

下面是演示,视频来自官方 http://instagram.com/p/a1bu8uhQWX/ 。

Download video: MP4 format

 

播放器页面来自“反”斗软件



WeChat
微信搜索「反斗软件」或扫描上方二维码关注我们,每天为你送上精选的限免信息,更便捷的限免信息获取方式,不定时举行有奖活动

发表评论

电子邮件地址不会被公开。 必填项已用*标注

无觅相关文章插件,快速提升流量