這篇文章主要為大家展示了“如何解決Html5中視頻、音頻標簽的進度條問題”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“如何解決Html5中視頻、音頻標簽的進度條問題”這篇文章吧。

創(chuàng)新互聯(lián)公司的客戶來自各行各業(yè)，為了共同目標，我們在工作上密切配合，從創(chuàng)業(yè)型小企業(yè)到企事業(yè)單位，感謝他們對我們的要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領(lǐng)域包括做網(wǎng)站、網(wǎng)站制作、電商網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)。

最近項目中使用Html5的video和audio標簽來在線播放視頻和音頻文件，但是遇到個奇葩的問題，頁面上播放之后進度條無效，

查看w3c之后發(fā)現(xiàn)html代碼并沒有什么不同，之后猜想如果用靜態(tài)的html使用video標簽播放本地文件進度條會不會能用呢？

試了一下發(fā)現(xiàn)真的可以使用，隨后F12查看播放本地視頻和播放項目中的網(wǎng)絡響應有什么區(qū)別，發(fā)現(xiàn)響應頭多了些東西，隨把這些東西一個一個加到后臺代碼中，最后成功了!

response.setHeader("Cache-Control","max-age=31536000, must-revalidate");  
response.setHeader("Content-Length", file.length() + "");  
if (fileName.contains(".mp4")) {  
   response.setContentType("video/mpeg4");  
}  
if (fileName.contains(".mp3")) {  
   response.setContentType("audio/mpeg");  
   response.setHeader("Accept-Ranges:", "bytes");  
}

以上是“如何解決Html5中視頻、音頻標簽的進度條問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！