javascript插入视频类

上一篇中是利用jQuery来实现插入视频,那为什么不用js原生来写呢,这样就不加载jQuery的库了。顺便学习了javascript的面向对象实现类。

调用方式如下

[cce_js]
/**
*先实例化对象,调用对应的实例的方法
*/
var v= new video('video');
//插入youku的视频
v.youku('rCWLA1bRkUE');
//可自定义宽度和高度
v.youku('rCWLA1bRkUE',100,100);
//tudou
//v.tudou('rCWLA1bRkUE');
//ku6
//v.ku6('XXX');
//youtube
//v.youtube('XXX');
[/cce_js]

video.js源代码

[cce_js]

/**
*javascript 插入视频类
*Author:Arthur
*Blog:http://www.xbc.me
*/
function video(id){
	this.id = id;
	this.flash = '<object width="mywidth" height="myheight" type="application/x-shockwave-flash" data="myurl"><param name="quality" value="high"><param name="allowScriptAccess" value="always"><param name="flashvars" value="playMovie=true&isAutoPlay=true"></object>';
	this.youku = function(code,width,height){
		if(width == undefined){
		width = 480;
		}
	if(height == undefined){
		height =400;
		}
	var url ='http://player.youku.com/player.php/sid/myid/v.swf';
	document.getElementById(this.id).innerHTML = this.flash.replace(/myurl/,url.replace(/myid/,code)).replace(/mywidth/,width).replace(/myheight/,height);
		}
	this.tudou = function(code,width,height){
		if(width == undefined){
		width = 480;
		}
	if(height == undefined){
		height =400;
		}
	var url ='http://www.tudou.com/v/myid/v.swf';
	document.getElementById(this.id).innerHTML = this.flash.replace(/myurl/,url.replace(/myid/,code)).replace(/mywidth/,width).replace(/myheight/,height);
		}
	this.ku6 = function(code,width,height){
		if(width == undefined){
		width = 480;
		}
	if(height == undefined){
		height =400;
		}
	var url ='http://player.ku6.com/refer/myid/v.swf';
	document.getElementById(this.id).innerHTML = this.flash.replace(/myurl/,url.replace(/myid/,code)).replace(/mywidth/,width).replace(/myheight/,height);
		}
	this.youtube = function(code,width,height){
		if(width == undefined){
		width = 480;
		}
	if(height == undefined){
		height =400;
		}
	var url ='http://www.youtube.com/v/myid&hl=en_US&fs=1&autoplay=1';
	document.getElementById(this.id).innerHTML = this.flash.replace(/myurl/,url.replace(/myid/,code)).replace(/mywidth/,width).replace(/myheight/,height);
		}
}
[/cce_js]

视频短代码

在WordPress中有很多种方法插入视频,当WordPress自带的插入视频又比较笨,当然也有一些插件像WordPress Video Plugin,smart-video,这些插件用起来也很不 “听话”,你说我首页要输出摘要的,你也播放视频,这就不靠谱了…..

所以就自己写了一个插件,添加了几个短代码,可以添加国内的视频。

1. 支持视频网站的列表:

  • 优酷
  • 土豆
  • 搜狐
  • 腾讯视频
  • 乐视
  • 酷6
  • 56

2. 支持直接粘贴视频地址,Video Short Code插件会自动转为视频短代码。支持以上视频网站,暂时不支持搜狐视频。

Update:2013.4.4


关于如何查找视频的code,以youku视频为例
例如http://player.youku.com/player.php/sid/XXXXXXX/v.swf
XXXXXXX为视频代码
使用方法

Update:2013.4.5
Video Short Code插件上传到WordPress的插件目录,可在WordPress后台直接搜索Video Short Code,进行安装。

Update:2014.9.16

  1. 更新插件到1.1
  2. 支持直接粘贴部分视频网站的视频URL。

项目托管在GitHub上,如果使用中遇到bug,请直接提Issues

jQuery 省市联动的效果

看到一个高手写了一个JS省份三级联动,看着我手痒痒,决定用jquery写一个,于是就开始漫长的json之旅

说起json,这个话就长了,反正大有取代xml的趋势,xml的复杂解析看着头大,想要详细了解json 请点击这里 这个是json中文官方网站的介绍。

好了,下面开始整体了,我做的这个省市是利用jquery发起ajax请求传递一个省的值,php文档获取这个值以后呢,输出相关的市级信息,格式当然是json的,然后就开始解析这个格式的信息,将其加载到select里面去,然后重复选择下面的县/区就可以了。

看图说话

刚开始是这样子的

jQuery 省市联动的效果 step1
jQuery 省市联动的效果 step1

选择湖北省以后呢,就加载下面的市级元素到色了传统里面的。

jQuery 省市联动的效果 step2
jQuery 省市联动的效果 step2

选择了合适的市以后呢,加载下面的区了。大致是这样的

jQuery 省市联动的效果 step3
jQuery 省市联动的效果 step3

相关的文件有四个:

目录结构

root

blog three.php
get  three.php
js three.js  jquery.selector.js

three.php:在blog的目录下,传递select改变时的值

[cce_php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三省联动</title>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<!--<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>-->
<script  type="text/javascript"  src="../js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="../js/jquery.selecter.js"></script>
<script type="text/javascript" src="../js/three.js"></script>
</head>

<body>
<div class="main">
<fieldset>
<legend>三省联动jquery版</legend>
<label for="province"></label>
<select id="province">
<option  value="1">湖北省</option>
<option  value="2">广东省</option>
</select>
<label for="city"></label>
<select id="city" name="city">
<option>武汉市</option>
<option>深圳市</option>
</select>
<label for="country"></label>
<select id="country">
<option>洪山区</option>
<option>罗湖区</option>
</select>
<div id="load"><img src="../images/loading.gif" width="18" height="18" /></div>
</fieldset>
</div>
</body>
</html>
[/cce_php]

three.php :在get目录下,获取相关的值,输出json信息

[cce_php]
<?php
//相关的市级信息,和区的信息
$arr2= array(
             array('value' => 'guangzhou','caption' => '广州市'),
             array('value' => 'guangzhou','caption' => '佛山市'),
             array('value' => 'guangzhou','caption' => '深圳市'),
             array('value' => 'guangzhou','caption' => '茂名市'),
             array('value' => 'guangzhou','caption' => '阳江市'),
             array('value' => 'guangzhou','caption' => '东莞市'),
             array('value' => 'guangzhou','caption' => '中山市')
);
$arr1= array(
             array('value' => 'wuhan','caption' => '武汉市'),
                   array('value' => 'wuhan','caption' => '宜昌市'),
                   array('value' => 'wuhan','caption' => '黄石市'),
                   array('value' => 'wuhan','caption' => '十堰市'),
                   array('value' => 'wuhan','caption' => '襄阳市'),
                   array('value' => 'wuhan','caption' => '武汉市'),
                   array('value' => 'wuhan','caption' => '荆州市'),
                   array('value' => 'wuhan','caption' => '孝感市'),
                   array('value' => 'wuhan','caption' => '黄冈市'),
                   array('value' => 'wuhan','caption' => '随州市')
);
$arr3 = array(array('value'=> 'hanyang','caption'=>'汉阳区'),
                    array('value'=> 'hanyang','caption'=>'洪山区'),
                    array('value'=> 'hanyang','caption'=>'青山区'),
                    array('value'=> 'hanyang','caption'=>'汉口区'),
                    array('value'=> 'hanyang','caption'=>'蔡甸区'),
                    array('value'=> 'hanyang','caption'=>'江夏区'),
                    array('value'=> 'hanyang','caption'=>'东湖开发区')
);
$arr4 = array(array('value'=> 'yuexiu','caption'=>'越秀区'),
                    array('value'=> 'yuexiu','caption'=>'荔湾区'),
                    array('value'=> 'yuexiu','caption'=>'海珠区'),
                    array('value'=> 'yuexiu','caption'=>'天河区'),
                    array('value'=> 'yuexiu','caption'=>'白云区'),
                    array('value'=> 'yuexiu','caption'=>'黄浦区'),
                    array('value'=> 'yuexiu','caption'=>'花都区')
);
//获取post过来的值,输出json格式的数据
if(isset($_POST['province'])){
$province = $_POST['province'];
if($province == "1"){
    echo json_encode($arr1) ;
    }elseif($province == "2"){
        echo  json_encode($arr2) ;
    }
}
if(isset($_POST['city'])){
    $city =$_POST['city'];
    if($city == "wuhan"){
    echo json_encode($arr3) ;
    }elseif($city == "guangzhou"){
        echo  json_encode($arr4) ;
    }
}
?>
[/cce_php]

three.js:在js目录下,发起ajax请求的js代码

[cce_js]
$(function (){
    $('#load').hide();
    $('#city').hide().change(function(){
        $('#country').show();
        });
    $('#country').hide();
    $('#province').change(function(){
                $('#country').hide();
        $.post('../get/three.php',{province:$('#province').val()},function(data){
                                          $('#city').loadSelect(json_decode(data));
                                          //$('#city').loadSelect(data);这样的载入会出现undefine的问题
                                          });
                                   });
    $('#city').change(function(){
        $.post('../get/three.php',{city:$('#city').val()},function(data){
                                          $('#country').loadSelect(json_decode(data));
                                          //$('#city').loadSelect(data);
                                          });
                                   });
    $('#load').ajaxStart(function(){
                                 $('#load').show();
                                $('#city').hide();
                                  });
    $('#load').ajaxStop(function(){
                                 $('#load').hide();
                                 $('#city').show();
                                 });
    //为了解决中文编码的问题
    function json_decode (str_json) {
    var json = this.window.JSON;
    if (typeof json === 'object' && typeof json.parse === 'function') {
        try {
            return json.parse(str_json);
        } catch(err) {
            if (!(err instanceof SyntaxError)) {
                throw new Error('Unexpected error type in json_decode()');
            }
            this.php_js = this.php_js || {};
            this.php_js.last_error_json = 4; // usable by json_last_error()
            return null;
        }
    }
    var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
    var j;
    var text = str_json;
    cx.lastIndex = 0;
    if (cx.test(text)) {
        text = text.replace(cx, function (a) {
            return '\\u' +
            ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
        });
    }
    if ((/^[\],:{}\s]*$/).
        test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@').
            replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').
            replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
        j = eval('(' + text + ')');
        return j;
    }

    this.php_js = this.php_js || {};
    this.php_js.last_error_json = 4; // usable by json_last_error()
    return null;
}
})
[/cce_js]

jquery.selector.js 在js目录下,jquery 操作select的扩展

[cce_js]
(function($) {
    //清空select元素
  $.fn.emptySelect = function() {
    return this.each(function(){
      if (this.tagName=='SELECT') this.options.length = 0;
    });
  }
    //添加option选项
  $.fn.loadSelect = function(optionsDataArray) {
    return this.emptySelect().each(function(){
      if (this.tagName=='SELECT') {
        var selectElement = this;
        $.each(optionsDataArray,function(index,optionData){
          var option = new Option(optionData.caption,optionData.value);
          if ($.browser.msie) {
            selectElement.add(option);
          }
          else {
            selectElement.add(option,null);
          }
        });
      }
    });
  }
})(jQuery);
[/cce_js]

在做的过程中参考了jquery实战的相关jquery扩展,但是我却为此郁闷了好几天。情况是这样的,在jquery的扩展中,实现了一个loadSelect方法,但是呢,在实际的编写中呢,遇到json的编码问题,后来找到了这个解决jsnon中文编码的问题–json_decode函数 我是从这篇文章看 用js的json_decode解决json中文编码问题看到的,利用这个函数进行解码,解决的中文编码的问题,不然的话,在加载select的元素的option是会出现莫名其妙的undefined,这个在js已经注释了。有关json格式和php json格式的可参考这里

出现这样的情况原因初步认为是在ajax传递数据的过程中编码转换出现错误,我的全部的页面时utf-8,但是json的格式全部都是unicode编码,然后到了js那里,就晕了,出现undefine问题。

希望有更好的办法解决编码的问题,不过暂时这样搞定就好了。