MicroMedia

Appearance

Return to top
On this page

影片上傳Web Component使用方式

用途

此元件會使用S3 multipart upload 機制

將檔案切片後分段上傳

載入方式

以下範例可以看到

只要透過script tag載入web component的js檔

並在body中使用micro-media-uploader tag來建立web component

即可開始在js中對micro media web component進行操作

html
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
  <!--安裝web component-->
  <script src="./micro-media-uploader.umd.js"></script>
</head>
<body>
<script>
  $(() => {
    // 取web component並assign給window.$microMediaUploader以便後續操作
    const element = document.querySelector('#micro-media-uploader')
    window.$microMediaUploader = element._instance.exposed
    
    // 初始化元件
    window.$microMediaUploader.init({
      // 初始化設定請詳見methods頁面的init說明
    })
  })
</script>
  <!--載入web component-->
  <micro-media-uploader
    id="micro-media-uploader"
    debug
  ></micro-media-uploader>
</div>
</body>
</html>

API Key

服務將會佈署到AWS Lambda並透過API Gateway觸發

因此我們會提供您一組API Key讓您的請求可以通過API Gateway的驗證

只要在API請求的Header中設定x-api-key即可

簡易上傳檔案範例

上傳非常簡單

使用兩個method即可進行大檔分段上傳至S3

範例如下

建立一個上傳按鈕

html
<button id="browseFile">file</button>
<button id="upload">upload</button>

使用prepareUpload/upload兩個method進行上傳

javascript
$('#browseFile').click(() => window.$microMediaUploader.chooseFile())

$('#upload').click(() => {
  window.$microMediaUploader.prepareUpload({
    videoType: 'streaming-vod',
  })
  window.$microMediaUploader.upload()
})