vue+vue-video-player進度條拖動及斷續播放

 vue-video-player是一款視訊播放插件，具體怎麼引入vue-video-player 直接點進去有詳細的介紹。

項目中視訊可以正常播放，但是不能拖動進度條，拖動進度條就會從頭開始，解決辦法是在背景請求響應頭加上下面兩行代碼

後端

response.setHeader("Accept-Ranges", "bytes");
				response.setHeader("Content-Length", String.valueOf(fileLength));
           

這樣進度條就可以拖動了，如果不想進度條被拖動在前端将進度條的樣式修改如下 

.course_node_video >>> .vjs-progress-control{
        pointer-events: none;
    }
           

同時，第一行代碼也是我們實作斷續播放的關鍵。

前端

<video-player class="video-player vjs-custom-skin"
                      ref="videoPlayer"
                      :playsinline="true"
                      :options="playerOptions"
                      @ready="playerReadied"
                      @pause="onPlayerPause($event)"
                      @timeupdate = "onPlayerTimeupdate($event)">
        </video-player>
           

/* 設定視訊開始的進度 */
            playerReadied (player) {
                player.currentTime(this.currentTime)
            },
            // 暫停回調   将視訊播放的時間儲存
            onPlayerPause(player) {
                console.log('player pause currentTime!', player.cache_.currentTime);
                let that = this;
                //TODO   存儲player.currentTime 是目前暫停時間    用于下次斷續播放

            },
           

前端全部代碼

<template>
    <div class="course_node_video">
        <video-player class="video-player vjs-custom-skin"
                      ref="videoPlayer"
                      :playsinline="true"
                      :options="playerOptions"
                      @ready="playerReadied"
                      @pause="onPlayerPause($event)"
                      @timeupdate = "onPlayerTimeupdate($event)">
        </video-player>
    </div>
</template>

<script>
    import Vue from "vue";
    import VideoPlayer from 'vue-video-player'
    import 'vue-video-player/src/custom-theme.css'
    import 'video.js/dist/video-js.css'

    Vue.use(VideoPlayer)

    export default {
        name: "CourseNodeVideoPlayer",
        data(){
            return {
                playerOptions: {
                    playbackRates: [0.5, 1.0, 1.5, 2.0], // 可選的播放速度
                    autoplay: false, // 如果為true,浏覽器準備好時開始回放。
                    muted: false, // 預設情況下将會消除任何音頻。
                    loop: false, // 是否視訊一結束就重新開始。
                    preload: 'auto', // 建議浏覽器在<video>加載元素後是否應該開始下載下傳視訊資料。auto浏覽器選擇最佳行為,立即開始加載視訊（如果浏覽器支援）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流暢模式，并在計算播放器的動态大小時使用該值。值應該代表一個比例 - 用冒号分隔的兩個數字（例如"16:9"或"4:3"）
                    fluid: true, // 當true時，Video.js player将擁有流體大小。換句話說，它将按比例縮放以适應其容器。
                    sources: [{
                        type: "video/mp4", // 類型
                        src: '' // url位址
                    }],
                    poster: '', // 封面位址
                    notSupportedMessage: '此視訊暫無法播放，請稍後再試', // 允許覆寫Video.js無法播放媒體源時顯示的預設資訊。
                    controlBar: {
                        timeDivider: true, // 目前時間和持續時間的分隔符
                        durationDisplay: true, // 顯示持續時間
                        remainingTimeDisplay: false, // 是否顯示剩餘時間功能
                        fullscreenToggle: true // 是否顯示全屏按鈕
                    }
                },
                currentTime: null
            }
        },
        methods: {
            loadCourseNodeVideo: function (id) {
                this.playerOptions.sources[0]['src'] = serverIp + this.$apis.common.getFile+'?id=' + id;
            },
            /* 擷取視訊播放進度 */
            onPlayerTimeupdate (player) {
                this.currentTime = player.cache_.currentTime
            },
            /* 設定視訊開始的進度 */
            playerReadied (player) {
                player.currentTime(this.currentTime)
            },
            // 暫停回調   将視訊播放的時間儲存
            onPlayerPause(player) {
                console.log('player pause currentTime!', player.cache_.currentTime);
                let that = this;
                //TODO   存儲player.currentTime 是目前暫停時間    用于下次斷續播放

            },
        },
        beforeMount() {
            let id = this.$route.query.id;
            if (id != undefined && id != null) {
                //編輯
                localStorage.setItem("videoId", id);
                this.loadCourseNodeVideo(id);
            } else {
                id = localStorage.getItem("videoId");
                if (id != undefined && id != null) {
                    this.loadCourseNodeVideo(id);
                } else {
                    localStorage.removeItem("videoId");
                }
            }
        }
    }
</script>

<style scoped>
    .course_node_video {
        width: 100%;
        height: auto;
        margin: 0 auto;
        text-align: center;
    }
    .course_node_video >>> .vjs-progress-control{
        pointer-events: none;
    }
</style>