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

苹果cms插件之Plyr H5播放器

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

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

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

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

记忆播放

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

第一步：在JavaScript中写入一组封装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;
    }
}

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

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

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

player.on('loadeddata',function() {
    var cookieTime = cookie.get(source);
    if(cookieTime > 0) {
	    var zheng = Math.ceil(cookieTime);
	    player.forward(zheng);
    }
});

苹果cms整合

苹果cms整合Plyr下载：

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

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

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>';
MacPlayer.Show();