2014-11-05 72 views
0

我想播放使用HTML5數據URI的基地64編碼MP4。出於某種原因,視頻將無法播放。該方法適用於圖像文件(JPEG和PNG),但由於某些原因,它不適用於媒體文件。HTML5和PHP:播放基地64編碼視頻文件

在客戶端,我有:

document.getElementById("video_holder").src = "data:video/mp4;base64," + xmlhttp.responseText; 

HTML類似:

<video controls> <source type="video/webm" src="" id="video_holder" />... 

我使用PHP讀取該文件,並BASE64其發送給用戶之前對其進行編碼:

$file = file_get_contents($path); 
echo chunk_split(base64_encode(trim($file))); 

我也試過了:

$file = file_get_contents($path); 
echo base64_encode(trim($file)); 

有什麼建議嗎?

+0

只是因爲你可以提供一個數據uri並不意味着後端播放器會接受這樣的事情...... – 2014-11-05 20:31:55

回答

1

我會說你首先需要在JavaScript中解碼你的Base 64文件。這是解釋here,但一些瀏覽器不支持它。

然後,我會從解碼文件創建一個Blob object,然後從blob創建一個objectURL,並將此objectURL作爲HTML5視頻標記的src。

我還沒有這樣做,但這是我如何做,如果我不得不這樣做。爲什麼你需要首先base64編碼你的視頻文件?這可能會產生開銷並增加處理時間。如果您需要加密,DRM解決方案會更好。

+0

謝謝,會試試。有沒有什麼辦法可以在不使用base64編碼文件的情況下使用數據URI?我嘗試不編碼文件,然後只使用: document.getElementById(「video_holder」)。src =「data:video/mp4;」 + xmlhttp.responseText; – JB2 2014-11-06 10:01:59

+1

你應該能夠:var videoBlob = new Blob(videoData,{type:'video/mp4'});並將blob推送到objectURL並將objectURL推送到視頻標籤的src。 [更多信息](https://developer.mozilla.org/en-US/docs/Web/API/Blob.Blob) – 2014-11-06 10:13:37