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>

vue+vue-video-player进度条拖动及断续播放相关推荐

PyQt5 --- 进度条拖动点击视频播放
最近学习pyqt5,做一个视频播放器,网上找了很多资料都没有关于python方面的视频进度条拖动点击的方法,几乎都是Qt的.对相关资料的查阅,发现开发过程其实差不多,为此做一下相关的总结. 一.UI的 ...
断点续传（视频进度条拖动以及flv.js需要断点续传）
目前遇到2种场景需要用到断点续传视频进度条无法正常拖动,或拖动视频未发生变化,F12请求头中可以看到"Range". 使用B站开源组件flv.js只可以播放3分钟视频,想要解决就 ...
简单的进度条拖动效果及拖拽改变层大小
业务需求价格区间的进度条拖动初级demo 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=&qu ...
【OpenCV+Qt】实现简易视频播放器——支持进度条拖动
OpenCV实现视频播放器,其思路大致就是在线程中使用OpenCV中的VideoCapture循环读取本地视频的每一帧Mat,然后发送到界面转换成QImage进行显示,而进度条拖动则用到了VideoC ...
css拖动音乐进度条,利用CSS3实现3D滑块进度条拖动动画特效
特效描述:利用CSS3实现 3D滑块进度条拖动动画特效.利用CSS3实现3D滑块进度条拖动动画特效代码结构 1. HTML代码 Scalable 3D Range Sliders Simple ...
html5 音乐播放进度条,js实现音乐播放控制条
前言 html5中提供audio标签, 该标签实现音频的播放,之前就一直对于音频以及视频播放比较感兴趣,一直想要自己实现一个音频和视频播放的模块,这也是本文章撰写的初衷,最近花了些时间实现了Audio ...
怎么隐藏audio播放器的播放进度条，只保留播放按钮？
怎么隐藏audio播放器的播放进度条,只保留播放按钮? 截图在页面最右边的button中嵌套了audio音频播放器,播放器默认的样式有一个播放进度条,导致页面宽度被撑开了,布局被破坏. 第一种: 第 ...
vue vue3 实现滚动进度条，斑马纹进度条
vue实现进度条效果如下使用方法 <div style="width: 400px;text-align: center; margin: 0 auto">< ...
vue使用nprogress（进度条）
目录 1.安装 2.引入 3.配置 4.使用 5.使用场景 6.改变颜色 1.安装 npm install --save nprogress 2.引入 import NProgress from 'n ...

vue+vue-video-player进度条拖动及断续播放

vue+vue-video-player进度条拖动及断续播放相关推荐

最新文章

热门文章