Vue使用vue-video-player保存视频播放记录
Vue保存视频播放记录
前言：最近由于项目需要做一个视频播放器，还需要有记录视频播放时间的功能，在网上查阅了一些资料，找到一些方法，但大部分是用监听器每隔几秒往后台发送一个请求，这样太浪费后台资源。下面是我的思路和做法。
1.首先我挑选的是和vue搭配的vue-video-player做视频播放。下面是关于它的一部分代码。
html部分
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
:options="playerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@loadeddata="onPlayerLoadeddata($event)"
@waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@ready="playerReadied"
@statechanged="playerStateChanged($event)"
>video-player>
导入相关文件
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
data部分
data() {
return {
id: 0,
userId: 1,
courseId: 1,
playTime: '0',
sectionId: 1,
paused: true,
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
autoplay: false, // 如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [{
// src: '../../static/video/test.mp4', // 路径
src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
// type: 'video/mp4' // 类型
}],
poster: '', // 你的封面地址
// width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true // 全屏按钮
}
}
}
},
components
components: {
videoPlayer
},
调整播放按钮的样式
2.然后利用这个插件的 @timeupdate属性将视频播放时间赋值给data中的playTime,我这里将其他一些属性的方法也定义出来；
methods
//监听播放状态改变
playerStateChanged (player) {
// console.log(player);
},
//监听媒体是否已到达结尾，播放完
//DOM元素上的readyState更改导致播放停止。
onPlayerWaiting (player) {
// console.log(player);
},
//媒体不再被禁止播放，并且已开始播放。
onPlayerPlaying (player) {
// console.log(player);
},
//当播放器在当前播放位置下载数据时触发
onPlayerLoadeddata (player) {
// console.log(player);
},
//当前播放位置发生变化时触发。
onPlayerTimeupdate (player) {
this.playTime= player.cache_.currentTime
// console.log(player);
},
//媒体的readyState为HAVE_FUTURE_DATA或更高
onPlayerCanplay(player) {
// console.log('player Canplay!', player)
},
//媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
onPlayerCanplaythrough(player) {
// console.log('player Canplaythrough!', player)
},
//将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
playerReadied(player) {
// seek to 10s
console.log('example player 1 readied', player);
// player.currentTime(0)
// console.log('example 01: the player is readied', player)
}
,onPlayerPlay (player) {
this.paused = false
// console.log('onPlayerPlay!', player)
},
onPlayerPause (player) {
this.paused = true
// console.log('onPlayerPause!', player)
},
onPlayerEnded (player) {
this.paused = false
console.log('player ended!', player)
}
3.这时候我们要考虑怎么样将时间保存到数据库，我这里的思路是，在两种条件下去访问后台进行存储。一种是关闭视频页面的时候，一种是去点击其他页面的时候。
1.关闭视频页面
利用了HTML DOM事件中的onunload和onbeforeunload方法，感兴趣可以自己查询一下这两个的具体信息，我这里直接贴出代码。
首先在html里面加入以下代码
<body onbeforeunload="beforeunloadHandler()">body>
然后在methods中实现beforeunloadHandler()方法；
beforeunloadHandler(e) {
e = e || window.event;
if (e) {
this.$axios({
url: '/api/courseTime/addCourseTime',
method: 'post',
data: {
id:this.id,
userId:this.userId,
courseId:this.courseId,
playTime:this.playTime,
sectionId:this.sectionId
}
}).then(res => {
if (res.data.code == 200) {
}
})
}
// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
return "您是否确认离开此页面-您输入的数据可能不会被保存";
},
下面是mounted的代码，添加监听器
mounted(){
window.addEventListener("beforeunload", e => {
this.beforeunloadHandler(e);
});
},
下面是==destroyed ()==的代码，删除监听器
destroyed () {
window.removeEventListener("beforeunload", e => {
this.beforeunloadHandler(e);
});
this.$axios({
url: '/api/courseTime/addCourseTime',
method: 'post',
data: {
id:this.id,
userId:this.userId,
courseId:this.courseId,
playTime:this.playTime,
sectionId:this.sectionId
}
}).then(res => {
if (res.data.code == 200) {
}
})
}
2.点击其他页面,只需要将上面的==destroyed ()==代码粘上了就行
destroyed () {
window.removeEventListener("beforeunload", e => {
this.beforeunloadHandler(e);
});
this.$axios({
url: '/api/courseTime/addCourseTime',
method: 'post',
data: {
id:this.id,
userId:this.userId,
courseId:this.courseId,
playTime:this.playTime,
sectionId:this.sectionId
}
}).then(res => {
if (res.data.code == 200) {
}
})
}
4.这时候你只需要在你后台定义你的业务逻辑就可以了。
这是我的后台代码，只是输出一下时间。
@Controller
public class CourseTimeController {
@PostMapping("/courseTime/addCourseTime")
@ResponseBody
public ApiResult addCourseTime(@RequestBody Map<String, Object> params )
{
ApiResult apiResult= ApiResultHandler.buildApiResult(200,"新增成功",null);
System.out.println(params.get("playTime"));
return apiResult;
}
}