在Video.js中，单击进度条时视频将从头开始播放

Question

浏览器启动后，通过按钮选择视频并将其添加到video.js中。视频可以正常播放。但拖动进度条时，释放时总是从头开始播放。重现步骤为：1.点击按钮选择视频；2.Video.js正常播放视频；3.拖动进度条；4.视频从头开始播放。 videojs的版本是8.18.1，浏览器是Edge，操作系统是Windows 11。Video.js在Element plus（VUE3）中使用，代码如下：

<template>
    <el-container style="">
        <el-main>
            <el-container >
                <el-card >
                    <el-row>
                        <video
                            ref="videoPlayer"
                            class="video-js vjs-default-skin"
                            controls
                            preload="auto"
                            style="width: 100%;height: 500px;"
                            >
                        </video>
                    </el-row>
                </el-card>
            </el-container>
        </el-main>
    </el-container>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { Delete, Aim } from '@element-plus/icons-vue'
import { genFileId, ElMessage, ElMessageBox } from 'element-plus'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'

const videoPlayer = ref()
let selectedVideoPlayer = null


//init the videojs 
onMounted(() => {
    selectedVideoPlayer = videojs(videoPlayer.value, {
        controls: true,
        sources: [],
    });
})

// add a new video to videjs through url
const handleAddToDisplay = (index, row) => {
    console.log(index, row)

    let selectedVideoUrl = "http://xxx.mp4"
    console.log(selectedVideoUrl)
    changeDisplayedVideoSource(selectedVideoUrl)
    selectedVideoFile.value.videoFileName = row.videoFileName
    selectedVideoFile.value.videoFrameRate = row.videoFrameRate
}

// change the video source
const changeDisplayedVideoSource = (newSrc) => {
    selectedVideoPlayer.src([
        {
            src: newSrc,
            type: 'video/mp4'
        }
    ]);

    selectedVideoPlayer.ready(() => {
        const videoInfo = selectedVideoPlayer.currentHeight() + 'x' + selectedVideoPlayer.currentWidth()
        console.log(videoInfo)
    })

    selectedVideoPlayer.load()
    selectedVideoPlayer.play()
};
</script>

Answer 1

此症状始终是因为服务器未正确响应

Content-Range

标头。当您查找时，浏览器将请求一定范围的字节。如果服务器以文件的开头而不是该范围进行响应，则这就是播放的内容。客户端无法调整，服务器端必须修复。