MicroMedia

Appearance

Return to top
On this page

簡易影片上傳Web Component使用方式

用途

用於100MB以下的影片檔案(超過100MB以上建議使用分段上傳)

此元件會直接將檔案傳至micro media api

在後端直接將檔案上傳至S3

載入方式

以下範例可以看到

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

並在body中使用micro-media-simple-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-simple-uploader.umd.js"></script>
</head>
<body>
<script>
  $(() => {
    // 取web component並assign給window.$microMediaSimpleUploader以便後續操作
    const element = document.querySelector('#micro-media-simple-uploader')
    window.$microMediaSimpleUploader = element._instance.exposed
    
    // 初始化元件
    window.$microMediaSimpleUploader.init({
      // 初始化設定請詳見methods頁面的init說明
    })
  })
</script>
  <!--載入web component-->
  <micro-media-simple-uploader
    id="micro-media-simple-uploader"
    debug
  ></micro-media-simple-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.$microMediaSimpleUploader.chooseFile())

$('#upload').click(() => {
  window.$microMediaSimpleUploader.upload()
})