HTML5 - 帶有 Cloudfront 的 Amazon S3

Question

我有一個視頻上傳到 Amazon S3 服務器，我使用 Amazon cloudfront 在http://d1cjzj1b4csf2b.cloudfront.net/test.mp4上托管它。 我想使用 HTML5 標簽和視頻播放器播放視頻。 當我在本地托管 test.mp4 文件並使用下面的 HTML 代碼時，它可以在我的瀏覽器中運行。 但是，當我使用 Amazon Cloudfront 時它不起作用。 我嘗試將 Cloudfront 與 HLS 和 RTMP 流（和 JWPlayer）一起使用，但它們都不起作用，因為 Amazon 的文檔非常糟糕。 關於如何托管我的視頻並將其嵌入頁面的任何建議？ 我更喜歡簡單的東西，但我顯然可以嘗試使用像 JWPlayer 這樣的播放器。 提前致謝。

<video controls>
  <source src="http://d1cjzj1b4csf2b.cloudfront.net/test.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Answer 1

提供的代碼適用於 Chrome Win10。 如果將 url 添加到瀏覽器的地址欄中，則您的 MP4 正在下載，因此文件的content-type很可能不在標題中，或者具有默認值application/octet 。

1. 下載CloudBerry Explorer Amazon S3的免費副本或使用控制台

2. 安裝或登錄后，找到您的 MP4 並檢查content-type並確保它是video/mp4 。

   • 尋找允許您使用 CloudBerry 編輯HTTP Headers的選項。
   • 在 S3 控制台中查找元數據選項。
   • 兩者都可以通過右鍵單擊文件並打開首選項來訪問。

3. 如果您將 CF Distribution 設置為使用 HTTPS 協議，則將s添加到您的 url 的http

 <video controls> <source src="http://d1cjzj1b4csf2b.cloudfront.net/test.mp4" type="video/mp4"> Your browser does not support the video tag. </video>

Answer 2

我有一個視頻上傳到Amazon S3服務器，並且正在使用Amazon cloudfront將其托管在http://d1cjzj1b4csf2b.cloudfront.net/test.mp4上。 我想使用HTML5標簽和視頻播放器播放視頻。 當我在本地托管test.mp4文件並使用下面的HTML代碼時，該文件即可在我的瀏覽器中使用。 但是，當我使用Amazon Cloudfront時，它不起作用。 我嘗試將Cloudfront與HLS和RTMP流（以及JWPlayer）一起使用，但兩者都不起作用，因為Amazon的文檔非常差。 關於如何托管我的視頻並將其嵌入頁面的任何建議？ 我更喜歡簡單的東西，但是我顯然可以嘗試使用像JWPlayer這樣的播放器。 提前致謝。

<video controls>
  <source src="http://d1cjzj1b4csf2b.cloudfront.net/test.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>