在畫布應用程式中使用多媒體檔案

您可以將圖像、音訊和影片檔案新增至畫布應用程式。 從串流服務(例如,Microsoft StreamAzure 媒體服務)或協力廠商串流服務(例如 YouTube)新增影片。 或使用輸入控制項 (例如,手寫筆輸入) 來收集簽名。

本文將引導您使用多媒體、串流和輸入控制項案例。 本文使用的資料來源是商務用 OneDrive 中的 Excel 檔案。

先決條件

註冊 Power Apps,然後使用您註冊時所用的同一組認證進行登入

觀看此影片瞭解如何在畫布應用程式中使用多媒體檔案:

從檔案或雲端新增媒體

您可以選擇預計新增的媒體檔案類型 (例如圖像、影片或音訊)。 您可以使用媒體窗格或使用圖像控制項來新增圖像。

媒體窗格。

注意

透過 URL 新增媒體檔案時,

  • 使用 HTTPS 以確保與新式瀏覽器相容。
  • 確認 URL 可以不經任何驗證,匿名存取。 嘗試在隱私瀏覽模式下輸入 URL,以驗證無需登入即可存取該 URL。

使用媒體窗格新增圖像、音訊或影片

若要使用媒體窗格在應用程式中新增、移除或使用媒體檔:

  1. 從左窗格中選取媒體

    媒體。

  2. 從媒體面板中選取上傳

    上傳媒體。

  3. 選取要新增的檔案,然後選取開啟

  4. 從媒體窗格中選取要插入畫面的檔案。

    新增媒體。

  5. 儲存並發佈 您的應用程式。

  6. 與其他人共用應用程式

使用控制項新增圖像、音訊或影片

若要使用圖像音訊或視訊控制項新增圖像、音訊或影片,請執行下列動作:

  1. 從頂端功能表選取插入

  2. 選取媒體下拉式清單。

  3. 您可以選擇圖像音訊視訊控制項。

若為圖像控制項,請以圖像檔案名更新 Image 屬性,不含副檔名。 如果是音訊視訊控制項,請使用檔案名或是雙引號中的 URL (例如,YouTube 影片 URL) 更新 Media 屬性。

從 Azure 媒體服務新增媒體

  1. 從您的 Azure 媒體服務帳戶,從AMS > Settings > Assets 上傳及發佈影片資產。

  2. 發佈影片之後,複製其 URL。

  3. 從 Power Apps,新增 Insert > Media視訊控制項。

  4. Media 屬性設定到您複製的 URL。

    如本圖形所示,您可以選擇 Azure 媒體服務支援的任何串流 URL:

    設定媒體屬性。

  5. 儲存並發佈 您的應用程式。

  6. 與其他人共用應用程式

新增 Microsoft Stream 媒體

若要了解如何新增 Microsoft Stream 視訊控制項,請移至 Microsoft Stream 視訊控制項範例

從雲端新增圖像到您的應用程式

在此方案中,您將圖像儲存在雲端儲存體帳戶,OneDrive for Business。 您使用 Excel 資料表包含圖像的路徑,並在您的應用程式的資源庫控制項中顯示圖像。

本方案使用包括一些 .jpeg 檔案的 CreateFirstApp.zip

注意

往 Excel 檔案中的這些圖像路徑必須使用正斜線。 當 Power Apps 將圖像路徑儲存在 Excel 資料表時,路徑會使用反斜線。 如果您使用來自這類資料表的圖像路徑,請變更 Excel 資料表中的路徑,以使用正斜線而非反斜線。 否則不會顯示圖像。

  1. 下載 CreateFirstApp.zip,並解壓縮 Assets 資料夾到您的雲端儲存體帳戶。

  2. Assets 資料夾重新命名為 Assets_images

  3. 在 Excel 試算表中,建立一行資料表,並填入下列資料。

    Jackets 資料表。

    若要從 商務用 OneDrive 複製檔案路徑,請選取檔案,然後從畫面右邊的詳細資料窗格中選取路徑複製直接連結)。

  4. 將資料表命名為 Jackets,並將 Excel 檔案命名為 Assets.xlsx

  5. 在您的應用程式中,新增 Jackets 資料表做為資料來源

  6. 或者,將您的應用程式方向更新為橫向。

  7. 選取插入 > 資源庫,然後選取水平

  8. (選用) 選取文字欄位,然後選取第一個圖像下方的標題欄位,然後將其刪除,只在畫面上保留圖像。

    刪除欄位。

    如果看到公式錯誤,請按 Ctrl+Z 復原刪除,然後確認先刪除子標題欄位,然後才刪除標題欄位。

  9. 將資源庫的資源庫 Items 屬性設定為 Jackets

    項目屬性。

  10. 選取資源庫中的第一個圖像,並將其 Image 屬性設為 ThisItem.Images

    項目圖像。

    資源庫會以圖像自動更新︰

    Jacket 圖像。

    當您設定 Items 屬性時,名為 PowerAppsId 的行會自動新增到 Excel 資料表。

  11. 儲存並發佈 您的應用程式。

  12. 與其他人共用應用程式

將畫筆繪圖物件上傳到雲端

在此方案中,您了解如何將畫筆繪圖物件上傳到您的資料來源,OneDrive for Business,並查驗繪圖物件如何儲存在那裡。

  1. 在 Excel 中,新增圖像 [圖像] 到儲存格 A1。

  2. 使用下列步驟建立資料表︰

    1. 選取儲存格 A1。

    2. Insert 功能區中,選取 Table

    3. 在對話方塊中,選取 My table has headers,然後選取 OK

      建立資料表。

      您的 Excel 檔案現在是資料表格式。 如需 Excel 中的資料表格式化的相關資訊,請參閱將資料格式化為資料表

    4. 將資料表命名為 Drawings

      將資料表重新命名為 Drawings。

  3. 將 Excel 檔案以名稱 SavePen.xlsx 儲存到 OneDrive for Business。

  4. 在 Power Apps 中,使用平板電腦配置建立空白應用程式

  5. 在您的應用程式中,新增 OneDrive for Business 帳戶做為 資料來源

    1. 選取檢視功能表,然後選取資料來源

      選擇資料來源。

    2. 選取新增資料來源,然後選取商務用 OneDrive

    3. 選取 SavePen.xlsx

    4. 選取 Drawings 資料表,然後選取 連接

      連線。

      現在,Drawings 資料表已列為資料來源。

  6. 選取插入 > 輸入,然後選取手寫筆輸入

  7. 將新的控制項重新命名為 MyPen

    重新命名。

  8. 插入索引標籤上,新增按鈕控制項,並將其 OnSelect 屬性設定為以下公式:

    Patch(Drawings, Defaults(Drawings), {Image:MyPen.Image})

    按鈕 OnSelect。

  9. 新增水平資源庫控制項 (插入索引標籤 > 資源庫)。

  10. (選用) 選取文字欄位,然後選取第一個圖像下方的標題欄位,然後將其刪除,只在畫面上保留圖像。

    刪除欄位。

    如果看到公式錯誤,請按 Ctrl+Z 復原刪除,然後確認先刪除子標題欄位,然後才刪除標題欄位。

  11. 將資源庫的 Items 屬性設定為 Drawings。 資源庫控制項的 Image 屬性會自動設定為 ThisItem.Image

    排列控制項,使您的畫面如同以下所示︰

    範例畫面。

  12. 按 F5 或選取 Preview ( [預覽] 按鈕。 )。

  13. 在 MyPen 中繪圖,然後選取此按鈕。

    資源庫控制項中的第一個圖像顯示您繪製的圖。

  14. 在您的繪圖中新增其他元素,然後選取此按鈕。

    資源庫控制項中的第二個圖像顯示您繪製的圖。

  15. 按 Esc 鍵關閉預覽視窗。

    在您的雲端儲存體帳戶中,已自動建立一個 SavePen_images 資料夾。 此資料夾包含已儲存圖像與其檔名的識別碼。 例如為了顯示此資料夾,您可能需要按 F5 重新整理瀏覽器視窗。

    注意

    如果您的 Excel 檔案名稱不同,則資料夾名稱可能會不同。 例如,如果檔案名稱為 Pen.xlsx,資料夾名稱就會是 Pen_images。

    SavePen.xlsx 中,圖像行指定新圖像的路徑。

  16. 儲存並發佈 您的應用程式。

  17. 與其他人共用應用程式

移除未使用的媒體

您可以使用媒體 > 移除未使用的媒體選項,從應用程式中移除所有未使用的媒體以清理或減小應用程式的大小。

從應用程式中移除未使用的媒體

已知限制

  • 若要在載入應用程式時獲得更佳的效能,請遵循下列大小限制:
    • 上傳至應用程式的所有媒體檔案總大小不能超過 200 MB。
    • 在應用程式中,單個媒體檔的大小上限不能超過 64 MB。
  • 支援的媒體檔案類型包括:.jpg, .jpeg, .gif, .png, .bmp, .tif, .tiff, .svg, .wav, .mp3, .mp4
  • 使用雲端型儲存空間建立應用程式時,適用雲端儲存空間已知限制

請參閱

注意

是否能請您告知您偏好的慣用文件語言? 請填寫問卷。 (請注意,本問卷為英文版)

完成問卷大約需要七分鐘。 本問卷將不會收集個人資料 (隱私權聲明)。