简体   繁体   English

显示链接中的照片或视频

[英]display photo or video from a link

是否有某种插件可以显示网站链接中的照片或视频,例如,如果您在Facebook上发布链接,它会加载链接的微缩图片?

This is called URL Scraping. 这称为URL Scraping。 What you would need to do is load the URL and look at the content of the HTML that is returned. 您需要做的是加载URL并查看返回的HTML的内容。 From that the scraper would decide what images, and information are best suited for a "preview". 由此刮刀将决定哪些图像和信息最适合“预览”。

Usually scrapers would look at the pages meta data embedded within <meta> tags. 通常,scraper会查看<meta>标记中嵌入的页面元数据。

A great example (and how Facebook does it) is the Open Graph protocol. 一个很好的例子(以及Facebook如何做到这一点)是Open Graph协议。 You can read more about it here - http://ogp.me/ 你可以在这里阅读更多相关信息 - http://ogp.me/

Here is an example of what Open Graph meta tags look like - 以下是Open Graph元标记的示例 -

<meta property="og:title" content="The Rock"/>
    <meta property="og:type" content="movie"/>
    <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
    <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
    <meta property="og:site_name" content="IMDb"/>
    <meta property="fb:admins" content="USER_ID"/>
    <meta property="og:description"
          content="A group of U.S. Marines, under command of
                   a renegade general, take over Alcatraz and
                   threaten San Francisco Bay with biological
                   weapons."/>

When you post a link on Facebook, it will go out and look for meta tags like these and use their information to display a preview of the link. 当您在Facebook上发布链接时,它会出去查找这些元标记并使用其信息显示链接的预览。

你正在寻找蜘蛛: https//github.com/mikeal/spider (或类似谷歌的东西),请阅读@lix所说的内容。

Javascript - 将照片中的图像显示为唯一的<div></div><div id="text_translate"><p>我已经在这个网站上搜索了几天寻找解决方案。 我想使用 javascript 从我服务器上的文件夹中获取图像并将它们放入这样的集合中。 我认为这会相当简单,但我什么也没想到。</p><p> 它将取代此代码中部分标记之间的下面的 div。</p><p> 我可以对它们全部进行硬编码,但是我需要在这个轮播中显示 107 张图像,从长远来看,能够从文件夹中添加/删除图像比硬编码要容易得多商场。 以下是我到目前为止的代码。</p><pre> &lt;section id="vendors" class="zerogrid"&gt; &lt;div width="90%" &gt; &lt;div class="container" width="90%" style="background-color: #858585;"&gt; &lt;h2 class="clr-1" style="padding: 2%;" &gt;Our Suppliers&lt;/h2&gt; &lt;section class="customer-logos slider" style="padding-bottom: 5%;"&gt; &lt;div class="slide"&gt;&lt;img src="images/image1.png"&gt;&lt;/div&gt; &lt;div class="slide"&gt;&lt;img src="images/image2.png"&gt;&lt;/div&gt; &lt;div class="slide"&gt;&lt;img src="images/image3.png"&gt;&lt;/div&gt; &lt;/section&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $('.customer-logos').slick({ slidesToShow: 6, slidesToScroll: 1, autoplay: true, autoplaySpeed: 1000, arrows: false, dots: false, pauseOnHover: true, responsive: [{ breakpoint: 768, settings: { slidesToShow: 106 } }, { breakpoint: 520, settings: { slidesToShow: 3 } }] }); }); &lt;/script&gt; &lt;/section&gt;</pre><p> 这个旋转木马工作得很好,任何帮助得到排序的东西都将不胜感激。</p></div> - Javascript - Display images from photo into unique <div>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为远程文件(视频,照片等)创建Blob网址下载链接 - Create blob url download link for a remote file (video, photo, etc) 从Web应用程序捕获照片,音频和视频 - Capturing photo , audio and video from web application HTML/CSS - 将鼠标悬停在照片上时显示链接 - HTML/CSS - Display the link while hovering over a photo Javascript - 将照片中的图像显示为唯一的<div></div><div id="text_translate"><p>我已经在这个网站上搜索了几天寻找解决方案。 我想使用 javascript 从我服务器上的文件夹中获取图像并将它们放入这样的集合中。 我认为这会相当简单,但我什么也没想到。</p><p> 它将取代此代码中部分标记之间的下面的 div。</p><p> 我可以对它们全部进行硬编码,但是我需要在这个轮播中显示 107 张图像,从长远来看,能够从文件夹中添加/删除图像比硬编码要容易得多商场。 以下是我到目前为止的代码。</p><pre> &lt;section id="vendors" class="zerogrid"&gt; &lt;div width="90%" &gt; &lt;div class="container" width="90%" style="background-color: #858585;"&gt; &lt;h2 class="clr-1" style="padding: 2%;" &gt;Our Suppliers&lt;/h2&gt; &lt;section class="customer-logos slider" style="padding-bottom: 5%;"&gt; &lt;div class="slide"&gt;&lt;img src="images/image1.png"&gt;&lt;/div&gt; &lt;div class="slide"&gt;&lt;img src="images/image2.png"&gt;&lt;/div&gt; &lt;div class="slide"&gt;&lt;img src="images/image3.png"&gt;&lt;/div&gt; &lt;/section&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $('.customer-logos').slick({ slidesToShow: 6, slidesToScroll: 1, autoplay: true, autoplaySpeed: 1000, arrows: false, dots: false, pauseOnHover: true, responsive: [{ breakpoint: 768, settings: { slidesToShow: 106 } }, { breakpoint: 520, settings: { slidesToShow: 3 } }] }); }); &lt;/script&gt; &lt;/section&gt;</pre><p> 这个旋转木马工作得很好,任何帮助得到排序的东西都将不胜感激。</p></div> - Javascript - Display images from photo into unique <div> 从链接下载 Facebook 视频 - Facebook video download from link 首先从xml中读取照片链接,然后使用Photoswipe打开它 - First read photo link from xml and use Photoswipe to open it 从 videoJS 显示视频时长 - Display video duration from videoJS 显示来自 Blob Javascript 的视频 - Display a video from a Blob Javascript 如何显示来自JSON的视频? - How to display video from JSON? 如果链接中的链接中包含单词“ photo” - if the link contains the word “photo” in a link
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM