CKplayer与video标签实用于ios和Android的示例

1、使用html5 video标签
效果：
微信浏览器中显示，点击皆可全屏播放（ios默认显示播放按钮）
浏览器中显示，ios点击全屏播放（Android默认小屏播放）
实现：Android浏览器实现点击全屏播放
结果：目前在Android浏览器中，第一次点击，全屏播放
示例：

<div class="record_video">
    <video poster="/assets/images/record_video1.jpg" src="http://xxx/xxx.mp4" id="plat" preload="auto" onclick="autoFullScreen(this)">该浏览器版本太低，不支持视频播放</video>
</div>
<script>
$(function(){
    if ($("div.record_video").find("video").length>0) {
        $("div.record_video").find("video").each(function(){
            var id = $(this).attr("id");
            var video1 = document.getElementById(id);
            if (video1) {
                //点击屏幕播放或暂停视频
                video1.onclick = function() {
                    video1.controls = true;
                    if (video1.paused) {
                        video1.play();
                    } else {
                        video1.pause();
                    }
                }

                //全屏播放视频
                autoFullScreen(video1);
            }
        })
    }
})

//Android video 自动全屏播放
var fullscreen = function(elem) {
    var prefix = 'webkit';
    if ( elem[prefix + 'EnterFullScreen'] ) {
        return prefix + 'EnterFullScreen';
    } else if( elem[prefix + 'RequestFullScreen'] ) {
        return prefix + 'RequestFullScreen';
    };
    return false;
};
function autoFullScreen(v){
    var ua = navigator.userAgent.toLowerCase();  
    var Android = String(ua.match(/android/i)) == "android";
    if(!Android) return;//非android系统不使用;
    var video = v,doc = document;
    var fullscreenvideo = fullscreen(doc.createElement("video"));
    if(!fullscreen) {
        showMsg("不支持全屏模式");
        return;
    }
    video.addEventListener("webkitfullscreenchange",function(e){
        if(!doc.webkitIsFullScreen){//退出全屏暂停视频
            this.pause();
        };
    }, false);
    video.addEventListener("click", function(){
        this.play();
        video[fullscreenvideo]();
    }, false);

    video.addEventListener('ended',function(){
        doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
    },false);

};
</script>

2、使用CKplayer插件实现视频播放
效果：微信中显示，Android和ios点击两次，实现全屏播放（ios不显示播放按钮）
浏览器中，Android和ios点击两次，ios实现全屏播放，Android小屏播放
示例

<div class="record_video" id="plat" onclick='getPlayer(this.id,"{{$playUrls[0]}}")'>
    <img src="/assets/images/record_video1.jpg" />
</div>
<script src="/player/ckplayer/ckplayer.js}"></script>
<script>
    //视频插件引入
    function getPlayer(id, url){
    //url若为空，不做操作
    if (!url) {
        return false;
    }

    //配置插件参数
    var flashvars = {
        f:url,   
        c:'0',
        p:'1',
//      loaded:'loadedHandler'
    };
    var width = $('#'+id).width();
    var height = $('#'+id).height();
    var video = [url];  
    CKobject.embed('/player/ckplayer/ckplayer.swf', id,'ckplayer_a1',width,height,false,flashvars,video);

    //指定播放容器宽高--针对html5播放器
    if ($('#'+id).find('video#ckplayer_a1').length>0) {
        $('#'+id).css('width', width);
        $('#'+id).css('height', height);
    }

    //禁止重复加载视频插件,加载完视频插件后，移除点击事件
    $('#'+id).removeAttr('onclick');
}
</script>

注：
CKplayer插件使用文档：http://www.fufuok.com/demo/ckplayer/z.html
本示例可适用于同页展示多个视频~