WordPress纯代码集成ckplayer播放器

20年04月14日

当我们想个性化网站中视频元素时,比如自定义播放器 logo,自定义视频中滚动文字广告,自定义片头、片尾等等之类的,ckplayer 是我们一个不错的选择,ckplayer 支持 http 协议下的 flv,f4v,mp4,支持 rtmp 视频流和 rtmp 视频回放,支持 m3u8 格式,是一款很理想的播放器。wordpress 免插件集成 ckplayer 播放器,首先在 ckplayer 官网下载资源包,将 ckplayer 文件夹放入所使用主题里(确保 wp-content/themes/XXX/ckplayer/ckplayer.js 存在),添加下面代码到functions.php:

function MBThemes_ckplayer_scripts() {
wp_enqueue_script( 'ckplayer', get_bloginfo('template_url') . '/ckplayer/ckplayer.js', false, '', false);}
add_action('wp_enqueue_scripts', 'MBThemes_ckplayer_scripts');
add_shortcode("ckplayer","MBThemes_ckplayer_shortcode");
function MBThemes_ckplayer_shortcode( $atts, $content=null )
{$nonce = wp_create_nonce(rand(10,1000));
return '
<div id="ckplayer-video-'.$nonce.'" class="ckplayer-video" style="margin-bottom: 30px;"></div>
<script type="text/javascript">
    var videoObject'.$nonce.' = {
    container:"#ckplayer-video-'.$nonce.'",
    variable:"player",
    autoplay:false,
    video:"'.$content.'"};
    var player=new ckplayer(videoObject'.$nonce.');
    </script>';}

function ckplayer_tags($mce_settings) {
?>
<script type="text/javascript">
    QTags.addButton( 'ckplayer', 'ckplayer', '[ckplayer]', '[/ckplayer]' );
    function shortcode() {
    }
    </script>
<?php}
add_action('after_wp_tiny_mce', 'ckplayer_tags');

然后在发布文章时在文本内容框里插入短代码

[ckplayer]视频 url 地址[/ckplayer]

即可。

部分内容修改:
去掉加载Logo,及右上角Logo:
在ckplayer.js中搜索loading和logo改为null

style: { //风格部分内容配置,这里主要配置loading和logo以及广告的部分内容
            loading: null,
            logo:null,

打开ckplayer.xml搜索loading和logo改为null

<style>
        <loading><!--显示的loading元素-->
            null
        </loading>
        <logo>
            null
        </logo>

自动播放:
在ckplayer.js中搜索自动播放将autoplay后面的值改为1

自动播放:autoplay: 1,//是否自动播放

背景颜色修改(为了更好匹配主题CSS建议去掉背景色):
在ckplayer.js中搜索backgroundColor将后面的值改为空

this.css(this.CD, {
                backgroundColor: '',
                overflow: 'hidden',
                position: 'relative'
            });
            this.css(this.PD, {
                backgroundColor: '',
                width: '100%',
                height: '100%',
                fontFamily: this.fontFamily
            });

长宽比大小:
在ckplayer.js中搜索width: ‘100%’;height: ‘100%’,进行修改

this.css(this.PD, {
                backgroundColor: '',
                width: '100%',
                height: '100%',
                fontFamily: this.fontFamily

为了更好适应手机小编不建议修改这里,可以在主题CSS中加入下面代码

embed,iframe,video,object{height:500px;max-height:100%;width:890px;max-width:100%;}

相关文章

给句点评吧!
loading