分类归档: Web

让KindEditor支持MP4视频(使用ckplayer播放器)

参考文章:https://blog.csdn.net/zhjx922/article/details/7601660

KindEditor本身支持音视频文件的上传,但是对于这些文件的支持是依赖于浏览器控件的,兼容性很差,而且现在比较常见的视频文件MP4也不支持,因此本文提供了对KindEditor进行修改的办法,使其在添加视频后可直接使用CKplayer进行播放。

CKplayer下载地址:http://www.ckplayer.com/down/
我这里使用的是2018-12-20的X1版本

使用简单调用方式:http://www.ckplayer.com/manualX/14.html

KindEditor我为了省事,我这里使用的是kindeditor.all.js直接进行修改,其他文件大同小异。

首先找到K.options,在embed数组中增加下面两项

'flashvars', 'allowfullscreen'

然后修改函数 function _mediaType(src)

// 把
if (/.(swf|flv)(\?|$)/i.test(src)) {
// 改成
if (/.(swf|flv|mp4)(\?|$)/i.test(src)) {

找到函数 function _mediaEmbed(attrs) 为html中的<embed标签添加两个属性

allowscriptaccess="always" allowfullscreen="true"

找到 KindEditor.plugin(‘media’ 修改音视频插件生成HTML的方法

// 将原有的HTML生成代码进行修改

var html = K.mediaImg(self.themesPath + 'common/blank.gif', {
src : url,
type : K.mediaType('.swf'),
width : width,
height : height,
quality : 'high'
});
// 改为

var html = K.mediaImg(self.themesPath + 'common/blank.gif', {
src : '/resource/ckplayer/ckplayer.swf', // 这里替换成你的ckplayer.swf的实际位置
flashvars : 'video=' + url.replace(/^video=/, ''),
type : K.mediaType('.swf'),
width : width,
height : height,
quality : 'high'
});

还需要将media插件代码的后半段中对视频属性修改的部分进行处理

// 找到
urlBox.val(attrs.src);
// 替换为
urlBox.val(attrs.flashvars);

最后只要在创建KindEditor实例时在items中添加’media’就可以了。

Read: 25

NGINX userid 分析、解码

生成userid的代码在 http/modules/ngx_http_userid_filter_module.c 大概550行左右。
uid_set 是4个uint32构成的,其中比较有用的是第二个unit32,是userid的生成时间。第四个是一个递增值 以 0x03030302 为初始值,每次递增0x100。

default: /* AF_INET */
                sin = (struct sockaddr_in *) c->local_sockaddr;
                ctx->uid_set[0] = sin->sin_addr.s_addr;
                break;
            }

        } else {
            ctx->uid_set[0] = htonl(conf->service);
        }

        ctx->uid_set[1] = htonl((uint32_t) ngx_time());
        ctx->uid_set[2] = htonl(start_value);
        ctx->uid_set[3] = htonl(sequencer_v2);
        sequencer_v2 += 0x100;
        if (sequencer_v2 < 0x03030302) {
            sequencer_v2 = 0x03030302;
        }
// 用PHP解码nginx userid
$str = $_REQUEST["uid"] ?: $_COOKIE['uid'];

function nginx_userid_decode($str)
{
        return  unpack('N*', base64_decode(str_replace(' ', '+', $str)));
}

$hash = nginx_userid_decode($str);
var_dump($hash);
date_default_timezone_set("UTC");
var_dump(date("Y-m-d H:i:s", $hash[2]));

参考文章:
http://www.lsproc.com/blog/nginx_userid_decode/

Read: 2754

广告术语 CPM、CPC、CPA 是什么意思?

1.CPM(Cost Per Mille,或者Cost Per Thousand;Cost Per Impressions) 每千人成本
 
  网上广告收费最科学的办法是按照有多少人看到你的广告来收费。按访问人次收费已经成为网络广告的惯例。CPM(千人成本)指的是广告投放过程中,听到或者看到某广告的每一人平均分担到多少广告成本。传统媒介多采用这种计价方式。在网上广告,CPM取决于“印象”尺度,通常理解为一个人的眼睛在一段固定的时间内注视一个广告的次数。比如说一个广告 横幅的单价是1元/CPM的话,意味着每一千个人次看到这个Ban-ner的话就收1元,如此类推 ,10,000人次访问的主页就是10元。?
 
  至于每CPM的收费究竟是多少,要根据以主页的热门程度(即浏览人数)划分价格等级,采 取固定费率。国际惯例是每CPM收费从5美元至200美元不等。
 
2.CPC(Cost Per Click;Cost Per Thousand Click-Through) 每点击成本
 
  以每点击一次计费。这样的方法加上点击率限制可以〖WX)〗加强作弊的难度,而且是宣传网站站点的最优方式。但是,此类方法就有不少经营广告的网站觉得不公平,比如,虽然浏览者没有点击,但是他已经看到了广告,对于这些看到广告却没有点击的流量来说,网站成 了白忙活。有很多网站不愿意做这样的广告,据说,是因为传统媒体从来都没有这样干过。
 
3.CPA(Cost Per Action) 每行动成本?
 
  CPA计价方式是指按广告投放实际效果,即按回应的有效问卷或定单来计费,而不限广告投 放量。CPA的计价方式对于网站而言有一定的风险,但若广告投放成功,其收益也比CPM的计 价方式要大得多。 ? 广告主为规避广告费用风险,只有当网络用户点击旗帜广告,链接广告主网页后,才按点击 次数付给广告站点费用。

Read: 2808

一些网站开发中常用到的Javascript项目

图片轮播 SlideJS

SlidesJS is a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 transitions. Give it a try above and check out the examples to help you get started adding SlidesJS to your project.

官方地址: http://www.slidesjs.com/

 

图片滚动(Marquee) jCarousel

jCarousel是一款 jQuery 插件, 用来控制水平或垂直排列的列表项. 这些项目(可以是静态HTML内容或是Ajax加载内容)内容是可以来回滚动的(可以有动画效果)。

官方地址: http://sorgalla.com/jcarousel/

中文文档:http://www.zhangxinxu.com/jq/jcarousel_zh/

 

图像放大 Etalage

A ready to use jQuery image zooming plugin to present your images in the highest detail without leaving the page.

官方地址:http://frique.me/etalage/

 

简单粗暴的在线编辑器 KindEditor

KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。

官方地址:http://www.kindsoft.net

 

树状列表 zTree

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

官方地址:http://www.ztree.me/v3/main.php

 

数据报表 Google Chart

Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.

官方地址:https://developers.google.com/chart/?hl=zh-CN

Read: 312

Subversion SVN 分支 (Trunk/Branch/Tag) 在WEB项目中如何应用?

Trunk = 主干,包含所有开发代码
Branch = 分支其实是主干的copy(svn copy URL URL)。通常用来添加新功能、修改bug、创建发行版等。
Tag = 标记,通常用来做milestone标记,mark某个版本,比如bugfix前后的版本。
以上3个名词其实是版本管理中都概念,在svn中并没有对应功能实现。branch、tag实际上都是用svn copy实现。

感觉svn还是不太适合这种更新频繁的项目。
参考文章

SVN: How to structure your repository

http://ariejan.net/2006/11/24/svn-how-to-structure-your-repository/

SVN: How to release software properly

http://ariejan.net/2006/11/21/svn-how-to-release-software-properly/

Organizing, managing and deploying PHP projects in subversion (SVN)

http://www.ericbieller.com/2011/02/04/organizing-managing-and-deploying-php-projects-in-subversion-svn/

Read: 46