我試著將一個視頻文件發送到HTML5

我發現了一個可以追溯到2010年的片段。

它在互聯網上到處復制,并且仍然在傳播,在代碼風格、名稱、使用的Node.js API版本或庫上有一些細微的差異。

這是片段:

app.get('/video', function(req, res) {

const path = 'some_path/video.mp4'

const stat = fs.statSync(path)

const fileSize = stat.size

const range = req.headers.range

if( range ) {

const parts = range.replace(/bytes=/, "").split("-")

const start = parseInt(parts[0],10);

const end = parts[1] ? parseInt(parts[1],10) : fileSize-1

const chunksize = (end-start)+1

const file = fs.createReadStream(path, {start, end})

const head = {

'Content-Range' : `bytes ${start}-${end}/${fileSize}`,

'Accept-Ranges' : 'bytes',

'Content-Length': chunksize,

'Content-Type' : 'video/mp4',

}

res.writeHead(206, head)

file.pipe(res)

} else {

const head = {

'Content-Length': fileSize,

'Content-Type' : 'video/mp4',

}

res.writeHead(200, head)

fs.createReadStream(path).pipe(res)

}

})

很明顯,此代碼片段尚未準備就緒:

它使用同步

statSync()

它不解析

Range

頭,并且沒有錯誤處理,

它是硬編碼的,

else

早午餐可能是多余的,

等。

我沒意見。這是一個“入門級”代碼。沒關系。

它不按預期工作

... 但是

仍然有效

.

,瀏覽器發送對

-標記為

范圍

Range: bytes=12345-

而且,在最初的請求中

Range: bytes=0-

const end = parts[1] ? parseInt(parts[1],10) : fileSize-1

與

const end = fileSize-1

而且,在最初的請求中,服務器將不發送視頻的一小部分,而是發送整個文件。在視頻回放的情況下-從請求的位置到結束有很大一塊。

如果您通過Javascript請求一個文件,這肯定不會按預期工作。您將等待文件完全加載,或者需要以某種方式處理跟蹤請求進度的問題,這將導致相當復雜的客戶端代碼。

但它的作用就像是

-標記,因為瀏覽器代表您處理這個問題。

end

這種方式:

const preferred_chunksize = 10000000 // arbitrary selected value

let end = parts[1] ? parseInt(parts[1],10) : start + preferred_chunksize

if( end > fileSize-1 ) end = fileSize-1

范圍

-標簽,即使這樣:

const preferred_chunksize = 10000000 // arbitrary selected value

let end = start + preferred_chunksize

if( end > fileSize-1 ) end = fileSize-1

好的,現在它確實發送了預期大小的部分響應。

但是

這些線條比

我們需要選擇

preferred_chunksize

明智地。E、 g小塊大小,如

preferred_chunksize=1000

會發出很多請求,工作速度會明顯減慢。

然而,至少在Chrome和Firefox上,原始版本的代碼流視頻文件非常好:我看不到過多的緩存或內存使用,或速度問題。我不必擔心

首選塊大小

所以我的問題是:我是否還需要發送大小正確的塊(如果我只是需要發送一個視頻到

-tag),是否有流行的瀏覽器/客戶端js庫無法播放原始片段提供的視頻文件?或者這個片段的方法有沒有隱藏的問題?

總結

以上是生活随笔為你收集整理的调用视频流html代码,如何将/“流”视频文件发送到HTML5视频标签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。