苹果cms插件之整合带记忆播放功能的轻量级Plyr H5播放器

苹果cms插件之Plyr H5播放器

前面我们已经介绍过了Plyr播发器，在此就不赘述了，点击下面链接可以直接传送过去。

相关链接：Plyr - 一个轻量级，UI好看的H5 Web播放器

相关链接：JavaScript和JQuery中的Cookie即页面数据缓存基本用法

下面我们主要来讲一下Plyr播放器如何实现记忆播放以及将Plyr播放器整合到苹果cms系统中。

记忆播放

要实现记忆播放，实现原理就是使用到JavaScript的Cookie，也就是说将用户的播放进度转化为浏览器缓存并存储到用户终端中，待到下一次用户观看同一视频链接时，自动调用缓存内的播放进度，然后给播放器发出跳转至该播放进度的指令，这一系列操作一瞬间已然完成，用户不会感到停顿，从而实现体验较好的视频记忆播放功能。

第一步：在JavaScript中写入一组封装Cookie代码

1. var cookie = {
   
2.     'set': function(name, value, days) {
   
3.         var exp = new Date();
   
4.         exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
   
5.         var arr = document.cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)'));
   
6.         document.cookie = name + '=' + escape(value) + ';path=/;expires=' + exp.toUTCString();
   
7.     },
   
8.     'get': function(name) {
   
9.         var arr = document.cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)'));
   
10.         if (arr != null) return unescape(arr[2]);
    
11.     },
    
12.     'put': function(urls) {
    
13.         var cookie = urls.replace(/[^a-z]+/ig, '');
    
14.         var cookie = cookie.substring(cookie.length - 32);
    
15.         return cookie;
    
16.     }
    
17. <font size="3">}</font>

复制代码

第二步：然后需要监听Plyr播放器的时间进度，也就是timeupdate数值，并将此值赋予浏览器Cookie缓存。

1. player.on('timeupdate',function() {
   
2.     if (cookie) cookie.set(source, player.currentTime, 30);
   
3. });

复制代码

第三步：就是给Plyr播放器一个指令，让Plyr播放器启动时读取Cookie缓存，并跳转至缓存所指的播放进度。

1. player.on('loadeddata',function() {
   
2.     var cookieTime = cookie.get(source);
   
3.     if(cookieTime > 0) {
   
4.             var zheng = Math.ceil(cookieTime);
   
5.             player.forward(zheng);
   
6.     }
   
7. });

复制代码

苹果cms整合Plyr下载：

付费内容

游客，您好！如果您要查看本帖隐藏内容请向楼主支付100积分

立即购买

将下载的Plyr整合文件解压，并拷贝至苹果cms系统目录内，登录苹果cms管理后台 - 视频 - 播放器，

选择需要使用Plyr来解析的资源站编码，如：mgM3U8，然后选择“编辑”-“播放器代码”，替换以下代码即可

1. MacPlayer.HTML = '<iframe width="100%" height="'+MacPlayer.Height+'" src="/static/player/18ma-plyr/?url='+MacPlayer.PlayUrl+'" allowtransparency="true" allowfullscreen="true" marginWidth="0" frameSpacing="0" marginHeight="0" frameBorder="0" scrolling="no" vspale="0" noResize></iframe>';
   
2. MacPlayer.Show();

复制代码