这篇文章距离上次修改已过半年,其中的信息可能已经有所发展或是发生改变。

转换为语音并朗读全文 00:00 / 00:00

20140307175927

咱们上网看视频的时候,会发现一些有趣的视频,为了造(bao)福(fu)社会,我们有可能会将之分享给基友丽友们。酱紫的话,我们可以弄一个视频页,专门放这些视频。

如果直接引用的话,页面加载会很慢,视频一多就占网速,浏览器不好还会出现假死。So,我们可以通过接口来调用数据,显示需要显示的。这样,就大大的好了。

于是麦葱就弄了这么一个视频页,页面不自动加载视频源,基友丽友们点击对应图片后才加载。目前仅支持优酷和B站的视频,如果你觉得麦葱弄的这个图片太小了并且只需要放优酷的视频,可以用牧风大神的优酷视频插件。麦葱这个因为B站视频缩略图的原因,图片尺寸只能限制在120×90 pixels。

如何添加模版?

制作这么一个页面需要这五个文件:page-mcv.phpmcv_func.phpmcv_md5.jsmcv_js.jsmcv_css.cssmcv_loading.gifmcv_sad.png

①:下载文章结尾的McVideo.zip压缩包,上传文件到指定位置

  1. 将mcv_md5.js、mcv_js.js放在主题目录js文件夹里
  2. 将mcv_css.css放在主题目录css文件夹里
  3. 将mcv_loading.gif、mcv_sad.png放在主题images文件夹里
  4. 将mcv_func.php放在主题目录functions文件夹里(没有请创建functions文件夹)

②:在主题目录新建一个page-mcv.php模版文件(BYMT用户直接将page-mcv.php放在主题目录里),套用page.php模版,在注释中添加Template Name: 视频页(mcv),将content那段代码(例如:<?php the_content('Read more...'); ?>或着<?php get_template_part( 'loop', 'page' ); ?>)替换成下面代码:

<div class="videoHead">
<a href="javascript:;" class="on" rel="all">全部视频</a>
<a href="javascript:;" rel="youku" class="">优酷</a>
<a href="javascript:;" rel="bilibili">哔哩哔哩</a>
</div>
<div class="line"></div>
<ul class="videoList">
<?php the_content(); ?>
</ul>
<p class="videoTip"><i class="icon-info"></i> 数据每1小时更新一次</p>

以twentyeleven为例,新建的page-mcv.php文件代码应为:

<?php
/*
Template Name: 视频页(mcv)
*/
get_header(); ?>
<div id="primary">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<div class="videoHead">
<a href="javascript:;" class="on" rel="all">全部视频</a>
<a href="javascript:;" rel="youku" class="">优酷</a>
<a href="javascript:;" rel="bilibili">哔哩哔哩</a>
</div>
<div class="line"></div>
<ul class="videoList">
<?php the_content(); ?>
</ul>
<p class="videoTip"><i class="icon-info"></i> 数据每1小时更新一次</p>
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
</div>
</div>
<?php get_footer(); ?>

③:进入后台>页面>新建页面,设置好别名,模版选择视频页(mcv)

④:打开functions.php,加入下面代码:

define("TPLDIR", get_bloginfo('template_directory')); /* 定义模版目录 */
define('THEMEVER', "2.1.1"); /* 定义版本号 */
/* BYMT主题用户无需添加上面两行代码*/
get_template_part('functions/mcv_func');

function mcv_scripts() {
if (is_page('ent-kichiku')){ /* ent-kichiku为你设置的页面别名 */
wp_enqueue_style('mcv_css', TPLDIR . '/css/mcv_css.css', array(), THEMEVER, 'all');
wp_enqueue_script( 'mcv_md5', TPLDIR . '/js/mcv_md5.js', array(), THEMEVER, true);
wp_enqueue_script( 'mcv_js', TPLDIR . '/js/mcv_js.js', array(), THEMEVER, true);
wp_localize_script( 'mcv_js', 'mcv', array( "homeurl" => home_url("/"), "tpldir" => get_bloginfo('template_directory') ));
}
}
add_action( 'wp_enqueue_scripts', 'mcv_scripts' );

如何添加视频?

记得去掉下面短代码中的@
麦葱为这个视频功能添加了短代码,直接使用[@mcv]优酷/B站视频地址[/@mcv]短代码就可以了。

编辑刚刚新建的页面,在编辑器里选择文本,输入[@mcv]优酷/B站视频地址[/@mcv],然后发布。

例如:

[@mcv]http://v.youku.com/v_show/id_XNjY0NzE2MTMy.html[/@mcv]

[@mcv]http://www.bilibili.tv/video/av984725/[/@mcv]

更改缓存时间?

编辑mcv_func.php,修改第45行的3600为你需要的值。编辑page-mcv.php,修改文字“数据每1小时更新一次”为你设置的值。

添加新分类?

目前只支持优酷和B站的视频,后续会新增。编辑page-mcv.php,在div.videoHead里面添加上就行。

错误码释义

  • 【-1】请带上视频地址,格式url=http://xxx.xxx/xxx
  • 【-2】无法解析该视频地址,不在支持的范围内
  • 【-3】视频地址参数不正确,不是有效的视频地址
  • 【-4】该视频不存在或者已被删除

api参数

api接口地址:http://www.yuxiaoxi.com/mcvapi?url=xxx

  • status 状态码 1为成功 其他为错误
  • type 网站分类
  • play 点击数
  • title 标题
  • pic 缩略图
  • time 时长
  • offsite 站外播放地址
  • onsite 站内播放地址
  • oriurl 真实播放地址

文件下载和演示

下载压缩包 演示地址

带符号 * 的表示必填项
  1. 龙笑天
    龙笑天

    非常清爽的网页,赞!

    回复
    1. MaiCong
      MaiCong博主

      你的网站也很大气

      回复
  2. 烂番茄
    烂番茄

    不错的呀。。

    回复
  3. 生活有意思
    生活有意思

    优酷现在三天两头的更新,不折腾了

    回复
  4. Test
    Test

    :| 感觉不错

    回复
  5. seri
    seri

    吊炸天啊。可惜暂时不弄视频部分。备用mark'!

    回复
  6. heyuan
    heyuan

    写的不错。欢迎回访

    回复
  7. 斌果
    斌果

    我也灌个水吧。。。

    回复
  8. 烂番茄
    烂番茄

    要的就是好效果。。

    回复