video element in ipad safari

video元素在ipad safari上的一些API是无法支持的。比如通过JS代码控制全屏。
我的要求是，页面上只有一个按钮，看不到视频元素，点击该按钮，全屏显示并播放视频，退出视频全屏后也是看不到视频元素的。

那么首先video元素是隐藏的。$(video).css({'visibility' : 'hidden', 'display' : 'none'});
按钮元素的 HTML

<div id="video2_context" style="z-index:1;position:absolute;width:200px;height:200px;left:50px;top:0px;"><img src="../images/多狀態 37_狀態 2 2_Content_P.png"></div>

video元素的HTML

<video id="video2" class="video" style="position: absolute; z-index: 1; left: 50px; top: 50px; visibility: hidden; display: none;" autobuffer="true" preload="auto" controls="controls" width="200" height="200" poster="../images/oceans-clip.png" __idm_id__="-1055178750"><source src="../videos/oceans-clip.mp4" type="video/mp4"><source src="../videos/oceans-clip.webm" type="video/webm"></video>

按钮的事件。注意必须通过jquery的get()函数去调用全屏 API才能实现。

$("#video2_context").bind("click",function(){
            	var enableFullScreen = video.webkitSupportsFullscreen;
            	var mozFull = video.mozfullscreenchange;
            	if (enableFullScreen) {
            		$(video).show();
            		//video.load();
            		//video.play();
            		//video.webkitRequestFullScreen();//chrome的全屏事件
            		//video.webkitEnterFullscreen();//safari的全屏事件
            		//video.webkitDisplayingFullscreen();//safari的全屏事件
            		//fuck！apple！
            		$(video).get(0).play();   //不用get直接$(video).play()也可以播放的     
      			$(video).get(0).webkitEnterFullscreen();//必须通过get(0)才能实现全屏  
            	}else if(mozFull){
            		$(video).show();
            		video.play();
            		video.mozfullscreenchange();
            	}else{
            		console.error("unsupport fullscreen!");
            	}

            	// $("#"+opt.id).show();
//             	
            	// _V_(opt.id).play();
				// _V_(opt.id).requestFullScreen();

            });

还有还有一个要点。就是如果video元素是动态生成的，一开始的隐藏是必须用css实现的而不能用jquery的hide()函数。否则也是不会全屏的。

(function($){
    //成员变量
    var videos = [];//全局audio数组，用来保存所有的audio对象。控制当前只有一个audio在播放并将暂停其它audio并切换icon
    var defaults = {
		pageIndex: 0,
        liIndex: 0,
        left: 0,
        top: 0,
        width:"auto",
        height:"auto",
        index:0,
		playInContext:false,//是否通过上下文播放
		mp4:"",//mp4视频地址
		webm:"",//web视频地址
		autoplay:true,//默认播放
		loop:false,//循环
		poster:"",//封面
		contextId:"videoContextID",
		effectType:"video",
	}
	
    function Video(obj){
    	this.options = {};
		//获取参数
		if (obj) {
			this.options = $.extend({}, defaults, obj);
			init(this);
		} else {
			console.error("no params");
		}
		
        
    }
    
    function init(target) {
		if($("#"+target.options.id).length != 0){
			console.error(target.options.id + " already exist!");
			return;
		}
		if(createHtml(target)){
			createEffect(target.options);
		}
	}
	
	//获取所在的页面位置
	function getWrapper(target) {
		target.wrapper = $("ul.pageUl:eq(" + target.options.pageIndex + ")").find("li.pageLi").eq(target.options.liIndex);
		if(target.wrapper.length != 1){
			console.error("error to find video wrapper!");
		}
	}
	
	//创建特效DOM元素
	function createHtml(target) {
		var that = target, innerHtml = "",opt = target.options;
		getWrapper(that);
		var element = document.createElement("video");
		element.setAttribute("id",opt.id);
		element.setAttribute("class","video");
		if(opt.liIndex > 0){
			opt.top = globals.screenHeight * opt.liIndex + opt.top;
		}
		element.setAttribute("style","position:absolute;z-index:" + opt.index + ";left:" + opt.left + "px;top:" + opt.top + 'px;');
		element.setAttribute("autobuffer","true");
		element.setAttribute("preload","auto");
		element.setAttribute("controls","controls");
		element.setAttribute("width",opt.width);
		element.setAttribute("height",opt.height);
		if(opt.loop)
			element.setAttribute("loop",opt.loop);
		if(opt.poster)
			element.setAttribute("poster",opt.poster);
		if(opt.autoplay)
			element.setAttribute("autoplay",opt.autoplay);
		
		if(opt.mp4){
			var source = document.createElement("source");
			source.setAttribute("src",opt.mp4);
			source.setAttribute("type","video/mp4");
			element.appendChild(source);
		}
		if(opt.webm){
			var source = document.createElement("source");
			source.setAttribute("src",opt.webm);
			source.setAttribute("type","video/webm");
			element.appendChild(source);
		}
		if(opt.ogv){
			var source = document.createElement("source");
			source.setAttribute("src",opt.ogv);
			source.setAttribute("type","video/ogv");
			element.appendChild(source);
		}
		
		// var html = "<video width='" + opt.width + "' height='" + opt.height + "' controls id='" + opt.id + 
			// "' poster='" + opt.poster + "' >";
		// if(opt.mp4){
			// html += "<source src='" + opt.mp4 + "' type='video/mp4' />";
		// }
		// html += "</video>";
		
		if(that.wrapper){
			that.wrapper.append(element);
			if(opt.playInContext && opt.contextImg){
				$("#"+ opt.id).css({'visibility' : 'hidden', 'display' : 'none'});
				//上下文控制的DIV
				var contextHtml = "<div id='" + opt.id + "_context' style='z-index:" + parseInt(opt.index) + ";position:absolute;width:" + opt.width + 
					"px;height:" + opt.height + "px;left:" + opt.left + "px;top:" + 0 + "px;' ><img src='" + opt.contextImg + "'></div>";
				that.wrapper.append(contextHtml);
			}
			return true;
		}else{
			console.error("error to create video html element");
			return false;
		}
	}
    
    //类成员方法
    Video.prototype.pauseVideo = function(){
        this.video.pause();
    };
     
    //创建特效
	function createEffect(options){
        var video = $("#" + options.id)[0];//获取video元素;

        video.addEventListener("error", function(){
            //The code property of the MediaError Object returns a number representing the error state of the audio/video:
            //1 = MEDIA_ERR_ABORTED - fetching process aborted by user
            //2 = MEDIA_ERR_NETWORK - error occurred when downloading
            //3 = MEDIA_ERR_DECODE - error occurred when decoding
            //4 = MEDIA_ERR_SRC_NOT_SUPPORTED - audio/video not supported
            switch (video.error.code) {
                case MediaError.MEDIA_ERROR_ABORTED:
                    console.log("视频的下载过程被中止。");
                    break;
                case MediaError.MEDIA_ERROR_NETWORK:
                    console.log("网络发生故障，视频的下载过程被中止。");
                    break;
                case MediaError.MEDIA_ERROR_DECODE:
                    console.log("解码失败。");
                    break;
                case MediaError.MEDIA_ERROR_SRC_NOT_SUPPORTED:
                    console.log("不支持播放的视频格式。");
                    break;
                default:
                    console.log("视频格式错误。" + video.error.code);
					$("#"+options.playBtn).remove();
					$("#"+options.pauseBtn).remove();
					break;
            }
            //$(video).remove();
        }, false);
        if (options.playInContext == true) { //默认播放
            var opt = options;
            $("#" + opt.id + "_context").bind("click",function(){
            	var enableFullScreen = video.webkitSupportsFullscreen;
            	var mozFull = video.mozfullscreenchange;
            	if (enableFullScreen) {
            		$(video).show();
            		//video.load();
            		//video.play();
            		//video.webkitRequestFullScreen();
            		//video.webkitEnterFullscreen();
            		//video.webkitDisplayingFullscreen();
            		//fuck！apple！
            		$(video).get(0).play();        
      				$(video).get(0).webkitEnterFullscreen();  
            	}else if(mozFull){
            		$(video).show();
            		video.play();
            		video.mozfullscreenchange();
            	}else{
            		console.error("unsupport fullscreen!");
            	}
            });
        }
	}
    
    //释放特效
    Video.prototype.destroy = function()
	{
		$("#" + this.options.id).unbind().remove();
	}
	
	window.Video = Video;
})(jQuery);

参考资料
apple的VIDEO api 说明
http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html

解决办法：
http://stackoverflow.com/questions/9486924/webkitenterfullscreen-using-external-button-works-in-chrome-and-safari-but-not