顯示縮略圖預覽插件

在本主題中，您將了解縮略圖預覽插件，該插件允許時間線在視頻的定義點顯示預覽圖像。用戶可以將鼠標懸停在時間軸上，並且在指定的時間範圍內將顯示您定義的圖像。

範例

下圖顯示了當用戶將鼠標懸停在進度欄上時顯示的縮略圖：

縮略圖插件顯示

以下示例視頻演示了Thumbnails插件的用法。開始播放視訊。然後，將鼠標懸停在進度欄上，然後選擇縮略圖以跳到視頻的該部分。

本主題包含下列各節：

收集縮略圖

此時，您必須自己收集圖像。預覽縮略圖可以作為Zencoder編碼過程。另外，工具的存在SnapMotion自動執行此過程。

無論如何生成圖像，都需要確定要使用的圖像數量並選擇合適的尺寸。

使用嵌入代碼實施

可以使用縮略圖插件來配置縮略圖。要使用嵌入代碼實現縮略圖插件，請按照以下步驟操作：

  1. 在Video Cloud Studio中，打開媒體模塊。
  2. 選擇您要使用的視頻，然後選擇發布和嵌入按鈕。
  3. 在對話框中，選擇“ Brightcove默認播放器”或您配置的播放器。

  4. 複製高級嵌入代碼，然後添加id歸因於video-js標籤。它看起來應該類似於： 

    <video-js
  id="myPlayerID"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  controls=""
  data-video-id="2026618970001"
  data-playlist-id=""
  data-application-id=""
  width="960" height="540"></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
  5. 將播放器嵌入的代碼和HTML頁面代碼粘貼到編輯器中。
  6. 在裡面head頁面代碼部分，添加以下CSS文件： 
    <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.css">
  7. 在裡面body部分，在播放器嵌入代碼下方，添加以下JavaScript文件： 
    <script src="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.js"></script>

  8. 在上一個腳本下面，添加一個包含以下內容的腳本塊：

    • 準備好播放器後獲得參考
    • 致電thumbnails帶有預覽縮略圖的插件 
    <script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;

    myPlayer.thumbnails(thumb_data);
  });
  var thumb_data = {
      "0": {
          "src": "http://solutions.brightcove.com/bcls/assets/images/sea-lionfish-thumbnail.png",
          "width": 120
      },
      "29": {
          "src": "http://solutions.brightcove.com/bcls/assets/images/sea-anemone-thumbnail.png"
      },
      "54": {
          "src": "http://solutions.brightcove.com/bcls/assets/images/sea-clownfish-thumbnail.png"
      },
      "84": {
          "src": "http://solutions.brightcove.com/bcls/assets/images/sea-seahorse-thumbnail.png"
      },
      "114": {
          "src": "http://solutions.brightcove.com/bcls/assets/images/sea-crab-thumbnail.png"
      },
      "143": {
          "src": "http://solutions.brightcove.com/bcls/assets/images/sea-dolphins-thumbnail.png"
      }
  };
	</script>

    當鼠標懸停在時間線上時，此示例將顯示縮略圖預覽圖像，如下所示：

    • 的海獅魚thumbnail.png從視頻開始到29秒顯示圖像
    • 的sea-anemone-thumbnail.png圖像顯示從29秒到54秒
    • 的海小丑魚thumbnail.png圖像顯示從54秒到84秒

      。 。 。

    • 的海豚-thumbnail.png從143秒到視頻結尾顯示圖像

    有關插件選項的詳細信息，請參見物產部分。

  9. 這是完整的代碼示例： 

    <!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Display Thumbnail Previews</title>
	<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.css">
</head>

<body>
	<video-js
		id="myPlayerID"
		data-account="1752604059001"
		data-player="default"
		data-embed="default"
		controls=""
		data-video-id="2026618970001"
		data-playlist-id=""
		data-application-id=""
		width="960" height="540"></video-js>
	<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

	<!-- Script for thumbnails plugin -->
	<script src="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.js"></script>

	<script>
	  videojs.getPlayer('myPlayerID').ready(function() {
	    var myPlayer = this;

			myPlayer.thumbnails(thumb_data);
	  });
		var thumb_data = {
        "0": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-lionfish-thumbnail.png",
            "width": 120
        },
        "29": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-anemone-thumbnail.png"
        },
        "54": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-clownfish-thumbnail.png"
        },
        "84": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-seahorse-thumbnail.png"
        },
        "114": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-crab-thumbnail.png"
        },
        "143": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-dolphins-thumbnail.png"
        }
    };
	</script>
</body>
</html>

性質

以下插件屬性用於控制縮略圖：

  • 第一個參數：
    • 該值可以是字符串或數字，並且與對象相關聯。
    • 這定義了您希望顯示縮略圖的時間（以秒為單位）。
    • 至少，您需要0帶有src用戶將鼠標懸停在進度欄的開頭時的值。如果您還有其他時間，該插件將對進度條進行分區，並在用戶將鼠標懸停在進度條上時顯示適當的圖像。
     
  • src：
    • 該值必須是一個字符串。
    • 這是您的縮略圖的URL。
  • width：
    • 對於第一張縮略圖，需要包含此屬性。當進度條的開始或結尾附近時，可防止圖像滑出顯示。

這是在進度欄中為三個時間段設置縮略圖的示例：

  • 當用戶將鼠標懸停在進度條上（從視頻開始到5秒）時，將顯示第一張圖像
  • 第二張圖像顯示從5秒到10秒
  • 從10秒到視頻結束顯示第三張圖像
  {
    "0": {
        "src": "http://solutions.brightcove.com/bcls/assets/images/Tiger-4-preview.jpg",
        "width": 120
    },
    "5": {
        "src": "http://solutions.brightcove.com/bcls/assets/images/Water-4-preview.jpg"
    },
    "10": {
        "src": "http://solutions.brightcove.com/bcls/assets/images/BirdsOfAFeather-4-preview.jpg"
    }
  }

CSS圖像精靈

如果選擇，則可以將CSS圖像精靈用作預覽縮略圖。以下JSON是options使用CSS圖像精靈時的屬性：

{
  0: {
    src: 'thumbnails.png',
    style: {
      left: '-60px',
      width: '600px',
      height: '68px',
      clip: 'rect(0, 120px, 68px, 0)'
    }
  },
  10: {
    style: {
      left: '-180px',
      clip: 'rect(0, 240px, 68px, 120px)'
    }
  },
  20: {
    style: {
      left: '-300px',
      clip: 'rect(0, 360px, 68px, 240px)'
    }
  },
  30: {
    style: {
      left: '-420px',
      clip: 'rect(0, 480px, 68px, 360px)'
    }
  },
  40: {
    style: {
      left: '-540px',
      clip: 'rect(0, 600px, 68px, 480px)'
    }
  }

變更記錄檔

沒有報告