手把手教你eBay商品詳情頁嵌入視頻

Bay一直致力于為買賣雙方提供更好的售賣平臺，為了便于賣家介紹商品以及買家了解所需，我們將為大家介紹兩種在商品詳情頁嵌入視頻的方法，以便更好的滿足買賣雙方的需求。除了文字介紹，我們也在每部分精心準備了視頻說明，歡迎點擊了解哦！

eBay商品詳情頁支持的視頻格式

eBay支持使用HTML5的VIDEO標簽來引用互聯網上的視頻資源（如MP4格式的視頻影片）直接播放，也支持使用圖片超鏈接的HTML代碼形式，將消費者引導向YouTube等視頻網站觀看相關內容。

注意、eBay已禁止使用動態內容如Javascript等代碼嵌入視頻，傳統視頻網站的視頻嵌入代碼不可直接引用，使用動態代碼可能會導致Listing下架。

01、嵌入視頻方法一：

· 上傳視頻：將視頻上傳至儲存空間；

· 編輯代碼：編輯如下代碼紅色部分，[URL]替換成需要嵌入的視頻URL，[VIDEO FORMAT]替換成相應視頻格式；

· 進入HTML編輯模式：選擇對應eBay listing，進入編輯模式，Item Description中選擇HTML編輯模式；

· 嵌入代碼：將編輯好的代碼嵌入商品詳情頁合適的位置。

代碼示例：

</video>

HTML5 Video標簽嵌入視頻步驟：

· 進入eBay listing編輯模式，在Item Description，選擇HTML模式；

· 使用HTML5 <VIDEO>標簽編寫代碼，貼入相應代碼。

HTML5 Video標簽嵌入視頻需要注意：

· HTML 5原生 <Video> 標簽可支持MP4, webM, OGG等多種格式的視頻播放；

· 用戶使用的瀏覽器決定了相應視頻格式是否可以播放；

· 用戶需自行尋找對應存儲空間，存儲自己的MP4視頻文件，以https協議引用。

代碼編寫提示：

HTML5格式的代碼嵌入后，商品詳情頁可直接播放視頻，如下：

視頻存儲空間 - Kizoa

用戶可以上傳視頻至Kizoa上存儲，用戶能在https://www.kizoa.app/pfh/index.php上傳視頻并以HTML5的方式進行視頻嵌入，詳細步驟請參考文末——如何使用視頻存儲空間 Kizoa。

02、嵌入視頻方法二：

圖片超鏈接嵌入視頻方法介紹：

· 編輯代碼：編輯如下代碼紅色部分，[TITLE]寫入相應視頻標題（或刪除），[YouTube Video ID]替換成需要嵌入的YouTube video ID，(或替換整段URL)；

· 進入HTML編輯模式：選擇對應eBay listing，進入編輯模式，Item Description中選擇HTML編輯模式；

· 嵌入代碼：將編輯好的代碼嵌入商品詳情頁合適的位置。

代碼示例：

<!-- BEGIN LINKED VIDEO →

<p>[TITLE]</p>

</a>

<p class="yt_ft">Video will open in a new window</p>

</div>

注意

在桌面和移動端瀏覽器中，將打開新的窗口，跳轉至YouTube網站進行播放；

Android和iOS的移動端eBay APP均不支持YouTube視頻播放。

圖片超鏈接嵌入視頻示例步驟：

· YouTube網站找到您所需要添加的視頻URL；

· 將該URL填入示例代碼中，將代碼復制入eBay Item Description：

代碼嵌入后，點擊eBay商品詳情頁的視頻，新的窗口將被打開，并跳轉至YouTube進行播放，如下：

注意、避免使用嵌入式視頻代碼。

需要強調的是，請避免使用Youtube或其他視頻網站提供的<iframe>嵌入視頻代碼，這種有可能將會被eBay識別為動態內容，可能會導致listing的下架。

除了YouTube，其他平臺也能支持相同嵌入視頻的功能，如下：

如何使用視頻存儲空間 Kizoa

上傳視頻步驟：

· 進入Kizoa主頁: https://www.kizoa.app/pfh/index.php

· 注冊賬號并登錄使用

· 點擊Add photos/videos以添加視頻

· 選擇上傳來源（可選來源自本機硬盤）

· 選擇視頻

· 系統正在上傳視頻

· 視頻上傳成功

獲取視頻地址：

· 雙擊播放該視頻

· 在鍵盤上按下F12；

· 點擊網頁源碼左上角的鼠標圖標；

· 任意點擊視頻播放的區域；

· 源碼中會顯示一個src的鏈接，即是視頻的地址 (https://ugc.kizoa.app/kgra2/f339033939_9814612.mp4)；

· 復制并保存好鏈接。

（來源：eBay）

圖片添加區域鏈接的基本寫法

首先我們看看效果：

實現這樣的功能需要學習以下幾點內容。

1.認識<img/><map><area/></map>基本結構

首先復制一個html框架，命名為“圖片區域鏈接.html”,示例代碼如下：

<!DOCTYPE HTML> 
  <html>  
  <head>   
  <title>圖片區域鏈接</title>  
  <meta charset="utf-8">  
  </head>   
  <body>  

  </body>   
  </html>

向<body></body>中添加<img><map><area/></map>基本結構，示例代碼如下：

 <body>  
 <img/>
   <map>
   <area/>
   </map>
 </body>

指定要添加區域鏈接的圖片的路徑，如下：

 <img src="img/image1.jpg"/>
   <map>
   <area/>
   </map>

讓<img>標簽通過<map>的名字來驅使<map>為自己工作。

需要兩步，第一，給<map>起名字，name=“map”，為了兼容所有的瀏覽器，還要加上id=“map”（有的瀏覽器只認id）。

第二，讓<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字時要加#。這個在之前的教程中也經常出現。

示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area/>
   </map>

下面來劃分區域。

2.為圖片劃分區域的方法

<area>是用來劃分區域的標簽，area也是“”區域“”的意思。

默認的shape（形狀）屬性有“矩形（rect）”、“圓形（circ）”、“多邊形（poly）”三個值。

分別添加三個形狀，示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area shape="rect"/>
   <area shape="circ"/>
   <area shape="poly"/>
   </map>

下面我們就要為區域規定參數，也就是在圖像上的位置和范圍大小。

為<area>添加coords屬性可以指定區域的位置和范圍。

如果shape="rect" 則coords由四個參數組成。例如coords="0,0,50,50"。從左到右，兩兩一組，組成兩個平面坐標，即（0,0）和（50，50），單位是“像素”，矩形區域如下：

如果shape=“circ”，coords=“50,50,10”。（50,50）定義了圓心，10是半徑。如圖：

如果shape=“poly”，coords的參數不少于3對！注意是“對”！從左到右，兩個數就是一組坐標，三組坐標可以確定一個三角形，多組坐標可以確定多邊形。例如

這組參數畫出了下圖中殲20的邊框線（600像素*400像素，如果圖像的長寬像素數變了，參數就不正確了），如圖：

這時，大家會有一個問題：如何才能知道圖像中某個像素點的坐標呢？

3.使用Gimp軟件精準定位圖片區域

使用Gimp軟件可以解決這個問題。

Gimp是一款類似于Photoshop的數字圖像處理軟件，不同的是，Gimp是開源免費的。

下載地址：https://www.gimp.org/

雙擊安裝即可，注意選擇一下安裝目錄。

完成安裝之后打開，界面如下：

點擊“文件”找到“打開”：

選擇要打開的圖片名字：

點擊名稱后，右邊會有圖像預覽，點擊“打開”即可：

打開后如圖：

把鼠標放到圖像的任意位置，看左下角：

這里就會顯示我們鼠標所在的像素坐標數值。

這樣我們就能方便地寫“poly”的coords了。

請在空閑時找一張圖片演練一下吧！

4.為區域添加鏈接

在<area/>標簽中添加href屬性即可指定鏈接路徑，如下：

href="https://www.zhihu.com/question/284642168"

添加title屬性可以在鼠標滑過鏈接區域時提示讀者，如下：

title="殲20氣動外形分析"

今天的內容結束了，圖像區域鏈接在使用時還有一些注意事項，我們下次再詳細討論。

使用碎片時間，學習完整知識！關注大魚師兄，一起精研技藝。

整合營銷服務商

手把手教你eBay商品詳情頁嵌入視頻

圖片添加區域鏈接的基本寫法

目錄

您的項目需求