一、为什么需要添加视频断点续播功能
在用户体验方面,很多用户不希望在观看视频时被迫从头开始播放。如果用户在观看视频时出现了其他的事情,例如接到电话或是需要离开电脑一会儿,重新开始观看视频会使得用户感到不舒服。此时,如果您提供了断点续播功能,用户就可以从离开时的地方重新开始观看,让用户体验搭配更好。
同时,在一些网速较慢的情况下,视频的数据加载会比较缓慢或是被打断,如果没有断点续播功能,用户需重新开始等待视频缓存完成,这种等待时间长短不一,给用户带来消极的体验,改善用户体验体验的一个方法就是加入断点续播技术。
二、怎么实现视频断点续播
实现视频断点续播需要三个步骤:
- 获得断点时间:每次用户随时可以离开观看窗口,通过监听用户离开窗口时的时间,记录下离开窗口时视频播放的时间点,为下次视频续播的时间点。例如,下次继续观看时从3分钟处继续播放。
- 开始播放:当用户再次回到视频播放页面,首先获取上一次的观看时间点作为播放的起点,在此基础上进行判断,如果此时网络连接流畅,正常播放即可,如果连接不稳定或者缓冲不完整,则应该提示用户需要等待,或者给予一些动画的等待效果。
- 结束或下线:最后一步是在记录视频断点时间,如果视频结束了,相应的断点时间也应该清零,如果用户离线了,记录的断点时间应该保存到用户的本地,下次打开时从断点时间开始观看。这需要在服务器端开发和前端开发上协同工作。
三、代码实现
// 监听用户离开视频播放页面的时间点
var video = document.getElementById('video');
window.addEventListener('beforeunload', function(event){
localStorage.setItem("video_time", video.currentTime);
});
// 获取上一次的观看时间
var last_time = localStorage.getItem("video_time");
if(last_time){
video.currentTime = last_time;
video.play();
}
// 记录视频播放结束时的断点时间
video.addEventListener('ended', function(event){
localStorage.removeItem("video_time");
});
四、总结
添加视频断点续播功能不仅能够提升用户的观看体验,也能增加用户对视频的黏性,整个操作队服务器端和前端有一定的技巧性,但总体上并不难,如果您想提高您网站的用户体验和黏性,不妨加入视频断点续播功能。