文章最后更新时间：2024年05月16日
XGplayer西瓜播放器是一款表现优秀的H5播放器，这款web播放器兼容性和实用性都挺不错，今天我们来用JavaScript的Cookie实现对西瓜播放器增加一个记忆播放功能，使这款H5播放器再增强一项实用性，前面讲了西瓜播放器安装使用和Cookie实现记忆播放原理，传送门：
相关链接：JavaScript和JQuery中的Cookie即页面数据缓存基本用法
接下来是西瓜播放器实现记忆播放的步骤：
第一步：引入XGplayer西瓜播放器和JQuery静态CDN
<link rel="stylesheet" href="https://unpkg.byted-static.com/xgplayer/3.0.1/dist/index.min.CSS"> <script type="text/JavaScript" src="https://unpkg.byted-static.com/xgplayer/3.0.1/dist/index.min.js"></script> <script type="text/javascript" src="https://cdn.staticfile.org/JQuery/3.4.1/jquery.min.js"></script>
第二步：初始化XGplayer西瓜播放器
const config = {
"id": "player",//容器
"url": vid,//视频地址
...
};
let player = new Player(config);第二步：加入Cookie代码
var cookie={'set':function(name,value,days){var exp=new Date();exp.setTime(exp.getTime()+days*24*60*60*1000);var arr=document.cookie.match(new RegExp('(^| )'+name+'=([^;]*)(;|$)'));document.cookie=name+'='+escape(value)+';path=/;expires='+exp.toUTCString()},'get':function(name){var arr=document.cookie.match(new RegExp('(^| )'+name+'=([^;]*)(;|$)'));if(arr!=null)return unescape(arr[2])},'put':function(urls){var cookie=urls.replace(/[^a-z]+/ig,'');var cookie=cookie.substring(cookie.length-32);return cookie}};第三步：监听XGplayer西瓜播放器播放时间变化并存入缓存，监听XGplayer西瓜播放器启动时读取缓存
此处为隐藏内容，请评论后查看隐藏内容，谢谢！
PS：如果是第一次打开此视频链接，则浏览器无该Cookie缓存，播放进度从头开始。下次播放同一视频链接时则读取缓存进度并跳转至该进度。
文章版权声明：除非注明，否则均为十八码原创文章，转载或复制请以超链接形式并注明出处。
发表评论