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', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。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
},

调整播放按钮的样式

<style scoped>
	.video-js .vjs-big-play-button{
		/*
		 播放按钮换成圆形
		*/
		height: 2em;
		width: 2em;
		line-height: 2em;
		border-radius: 1em;
	}

</style>

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;
    }
}