html5 video断点续播,vue-video-player 断点续播的实现

最近的项目中需要实现视频断点续播的功能，一听到这个功能。内心方张了..但却又有点小窃喜，小懵乱。抱着求学态度去挑战一下。

1.安装插件

npm install vue-video-player --save

2.Main.js 引入组件

import VideoPlayer from 'vue-video-player'

require('video.js/dist/video-js.css')

require('vue-video-player/src/custom-theme.css')

Vue.use(VideoPlayer)

3.页面使用组件

:props="defaultProps"

node-key='id'

highlight-current

:filter-node-method="filterNode"

ref="tree"

default-expand-all

@node-click="handleNodeClick" />

class="video-player vjs-custom-skin"

style="width: 1000px;height: 576px;display: inline-flex"

:playsinline="true"

:options="playerOptions"

@pause="onPlayerPause($event)"

@ended="onPlayerEnded($event)"

@play="onPlayerPlay($event)"

@timeupdate="onPlayerTimeupdate($event)"

@ready="playerReadied"

/>

import { videoPlayer } from 'vue-video-player'

import 'video.js/dist/video-js.css'

import 'vue-video-player/src/custom-theme.css'

import { treeselect } from "@/api//driver/videoChapter";

import Treeselect from "@riophae/vue-treeselect";

import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {

name: "videoPlayer",

components: { Treeselect,videoPlayer },

data() {

return {

//用户信息

user:{},