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

示例"/>

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插件使用文档：.html
本示例可适用于同页展示多个视频~