簡體   English   中英

顯示鏈接中的照片或視頻

[英]display photo or video from a link

是否有某種插件可以顯示網站鏈接中的照片或視頻,例如,如果您在Facebook上發布鏈接,它會加載鏈接的微縮圖片?

這稱為URL Scraping。 您需要做的是加載URL並查看返回的HTML的內容。 由此刮刀將決定哪些圖像和信息最適合“預覽”。

通常,scraper會查看<meta>標記中嵌入的頁面元數據。

一個很好的例子(以及Facebook如何做到這一點)是Open Graph協議。 你可以在這里閱讀更多相關信息 - http://ogp.me/

以下是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."/>

當您在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網址下載鏈接 從Web應用程序捕獲照片,音頻和視頻 HTML/CSS - 將鼠標懸停在照片上時顯示鏈接 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> 從鏈接下載 Facebook 視頻 首先從xml中讀取照片鏈接,然后使用Photoswipe打開它 從 videoJS 顯示視頻時長 顯示來自 Blob Javascript 的視頻 如何顯示來自JSON的視頻? 如果鏈接中的鏈接中包含單詞“ photo”
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM