一、为什么需要添加视频断点续播功能
在用户体验方面，很多用户不希望在观看视频时被迫从头开始播放。如果用户在观看视频时出现了其他的事情，例如接到电话或是需要离开电脑一会儿，重新开始观看视频会使得用户感到不舒服。此时，如果您提供了断点续播功能，用户就可以从离开时的地方重新开始观看，让用户体验搭配更好。
同时，在一些网速较慢的情况下，视频的数据加载会比较缓慢或是被打断，如果没有断点续播功能，用户需重新开始等待视频缓存完成，这种等待时间长短不一，给用户带来消极的体验，改善用户体验体验的一个方法就是加入断点续播技术。
二、怎么实现视频断点续播
实现视频断点续播需要三个步骤：
– 获得断点时间：每次用户随时可以离开观看窗口，通过监听用户离开窗口时的时间，记录下离开窗口时视频播放的时间点，为下次视频续播的时间点。例如，下次继续观看时从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");
});
四、总结
添加视频断点续播功能不仅能够提升用户的观看体验，也能增加用户对视频的黏性，整个操作队服务器端和前端有一定的技巧性，但总体上并不难，如果您想提高您网站的用户体验和黏性，不妨加入视频断点续播功能。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/240226.html
微信扫一扫 
支付宝扫一扫 