事情的起因是在博主把項(xiàng)目部署到服務(wù)器上后，發(fā)現(xiàn)由于視頻太大，加上服務(wù)器太垃圾，導(dǎo)致稍微大點(diǎn)的視頻加載很久才能播放（指十多分鐘…），然后就上網(wǎng)查找資料，看下咋實(shí)現(xiàn)。
這里涉及到有關(guān)http請求的知識(shí)“HTTP Header里的Range和Content-Range參數(shù)，Range是在請求頭里
Range: bytes=start-end,這個(gè)表示告訴后端只獲取start到end字節(jié)的文件
Content-Range: bytes start-end/文件總大小，返回瀏覽器，說明這次請求到的文件范圍，還有總文件的大??；
曉得這兩個(gè)Http參數(shù)就好辦了，大體上是瀏覽器發(fā)送帶有Range的請求頭，然后后端根據(jù)Range指定的范圍返回對應(yīng)大小的文件片段
#1.使用標(biāo)簽
標(biāo)簽的src屬性指向服務(wù)器鏈接，當(dāng)服務(wù)器響應(yīng)的HTTP狀態(tài)碼為206時(shí)，瀏覽器會(huì)自動(dòng)開啟分段式播放，在每次的HTTP請求頭中自動(dòng)加入Range請求頭，服務(wù)端只需要根據(jù)前端傳過來的Range信息截取視頻的指定區(qū)間來響應(yīng)即可。
#2.使用vue-video-player（vue里面的插件）
一開始我發(fā)現(xiàn)vue-video-player和video不同，每次發(fā)送的請求的Range里都只有字節(jié)開始，沒有字節(jié)結(jié)尾!
以至于找了很久怎么改vue-video-player請求頭的參數(shù)，后來發(fā)現(xiàn)只要有開頭就能夠?qū)崿F(xiàn)斷點(diǎn)下載，vue-video-player下次的Range開頭一定是上一次的開頭加上返回頭里content-length（后臺(tái)返回的下載文件的大小，response自動(dòng)返回的，不用自己設(shè)置）
大體流程是vue-video-player發(fā)送斷點(diǎn)請求，Range：btyes=start-，后臺(tái)知道是斷點(diǎn)請求后，利用RandomAccessFile類里的seek（start）方法將讀取文件的光標(biāo)移到Range指定位置，然后自己設(shè)置每次返回文件大小，返回給前端
前端看response里狀態(tài)代碼是206，就會(huì)自動(dòng)發(fā)送后續(xù)請求，Range:bytes=start+content-length里的字節(jié)大小
代碼
vue-video-player文章來源：http://www.zghlxwxcb.cn/news/detail-411971.html
<template>
<div class="my_video">
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="videoPlayerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@loadeddata="onPlayerLoadeddata($event)"
@timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@statechanged="playerStateChanged($event)"
@ready="playerReadied"
></video-player>
</div>
</template>
<script>
// 導(dǎo)入組件
import {videoPlayer} from 'vue-video-player'
export default {
name: 'VideoPlayer',
props:{
videoStr:{default:""}
},
components: {
videoPlayer
},
data () {
return {
video:'', //具體視頻
fileType: 'mp4', // 資源的類型
videoUrl: '', // 資源的路徑地址
posterUrl:'', //封面地址
headers:{
'Range':'bytes=0-1000'
}
}
},
mounted(){
},
methods:{
// 播放回調(diào)
onPlayerPlay(player) {
console.log('player play!', player)
},
// 暫?；卣{(diào)
onPlayerPause(player) {
console.log('player pause!', player)
},
// 視頻播完回調(diào)
onPlayerEnded($event) {
// this.$refs.videoPlayer.player.src(this.fileUrl)
$event
},
// DOM元素上的readyState更改導(dǎo)致播放停止
onPlayerWaiting($event) {
console.log($event)
},
// 已開始播放回調(diào)
onPlayerPlaying($event) {
console.log($event)
},
// 當(dāng)播放器在當(dāng)前播放位置下載數(shù)據(jù)時(shí)觸發(fā)
onPlayerLoadeddata($event) {
console.log($event)
},
// 當(dāng)前播放位置發(fā)生變化時(shí)觸發(fā)。
onPlayerTimeupdate($event) {
console.log($event)
},
//媒體的readyState為HAVE_FUTURE_DATA或更高
onPlayerCanplay(player) {
console.log('player Canplay!', player)
},
//媒體的readyState為HAVE_ENOUGH_DATA或更高。這意味著可以在不緩沖的情況下播放整個(gè)媒體文件。
onPlayerCanplaythrough(player) {
console.log('player Canplaythrough!', player)
},
//播放狀態(tài)改變回調(diào)
playerStateChanged(playerCurrentState) {
console.log('player current update state', playerCurrentState)
},
//將偵聽器綁定到組件的就緒狀態(tài)。與事件監(jiān)聽器的不同之處在于，如果ready事件已經(jīng)發(fā)生，它將立即觸發(fā)該函數(shù)。。
playerReadied(player) {
console.log('example player 1 readied', player);
},
},
computed: {
videoPlayerOptions () {
const videoPlayerOptions = {
playbackRates: [0.75, 1.0, 1.25, 1.5,2.0], //播放速度
autoplay: false, // 是否自動(dòng)播放。
muted: false, // 是否靜音播放，默認(rèn)情況下將會(huì)消除任何音頻。
loop: false, // 是否循環(huán)播放。
preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應(yīng)該開始下載視頻數(shù)據(jù)。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 將播放器置于流暢模式，并在計(jì)算播放器的動(dòng)態(tài)大小時(shí)使用該值。值應(yīng)該代表一個(gè)比例 - 用冒號(hào)分隔的兩個(gè)數(shù)字（例如"16:9"或"4:3"）
fluid: true, // 是否流體從而按比例縮放以適應(yīng)其容器。
flash:{hls:{withCreadentials:false}},//可以播放rtmp視頻
html5:{hls:{withCreadentials:false}},//可以播放m3u8視頻
sources: [{
type: 'video/' + this.fileType,
src:this.videoStr, // 視頻url地址
}],
poster: this.posterUrl, // 封面地址
width: '100%',
notSupportedMessage: '此視頻暫無法播放...', // 當(dāng)無法播放時(shí)允許覆蓋Video.js，顯示的默認(rèn)信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true
}
}
return videoPlayerOptions
}
},
}
</script>
<style scoped >
.my_video{
width: 100%;
height: 60%;
}
.video-js .vjs-big-play-button{
/*對播放按鈕的樣式進(jìn)行設(shè)置*/
width: 100%;
height: 100%;
border-radius: 50%;
}
</style>
后端：文章來源地址http://www.zghlxwxcb.cn/news/detail-411971.html
```javascript
```java
@RequestMapping("downVideoByStep")
public void play(String flag, HttpServletRequest request, HttpServletResponse response) throws IOException {
System.out.println("downVideoByStep");
String basePath = System.getProperty("user.dir") + "/video/";
response.reset();
File file = new File(basePath+flag);
long fileLength = file.length();
// 隨機(jī)讀文件
RandomAccessFile randomAccessFile = new RandomAccessFile(file, "r");
//獲取從那個(gè)字節(jié)開始讀取文件
String rangeString = request.getHeader("Range");
long range=0;
if (StrUtil.isNotBlank(rangeString)) {
range = Long.valueOf(rangeString.substring(rangeString.indexOf("=") + 1, rangeString.indexOf("-")));
}
//獲取響應(yīng)的輸出流
OutputStream outputStream = response.getOutputStream();
//設(shè)置內(nèi)容類型
response.setHeader("Content-Type", "video/mp4");
//返回碼需要為206，代表只處理了部分請求，響應(yīng)了部分?jǐn)?shù)據(jù)
response.setStatus(HttpServletResponse.SC_PARTIAL_CONTENT);
// 移動(dòng)訪問指針到指定位置
randomAccessFile.seek(range);
// 每次請求只返回1MB的視頻流
byte[] bytes = new byte[1024 * 1024];
int len = randomAccessFile.read(bytes);
//設(shè)置此次相應(yīng)返回的數(shù)據(jù)長度
// response.setContentLength(len);
//設(shè)置此次相應(yīng)返回的數(shù)據(jù)范圍
response.setHeader("Content-Range", "bytes "+range+"-"+(fileLength-1)+"/"+fileLength);
// 將這1MB的視頻流響應(yīng)給客戶端
outputStream.write(bytes, 0, len);
outputStream.close();
randomAccessFile.close();
System.out.println("返回?cái)?shù)據(jù)區(qū)間:【"+range+"-"+(range+len)+"】");
}
到了這里，關(guān)于vue-video-player，springboot實(shí)現(xiàn)視頻分段下載播放的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
