用h5的video标签,实现视频播放,点击按钮,iso全屏播放,安卓弹窗播放

lingzidai2371 2017-04-27 01:16:15
用h5的video标签,实现视频播放,点击一个按钮,iso全屏播放,安卓弹窗播放
1.先判断手机是安卓还是ios
2.点击按钮,ios可以直接全屏播放
3.点击按钮,安卓实现弹框播
求源码,谢谢大家
/*播放器判断是安卓还是ios*/
$(".arrow-curcle").click(function(){
if (browser.versions.mobile || browser.versions.android) {
$("#myvideo").css({
width:'100%',
height:'100%'});
$(".arrow-curcle").css("display")=="none";
}else if(browser.versions. ios|| browser.versions.iPhone){
window.location="";
}else if(browser.versions.mobile){
window.location="";
}
});


var browser = {
versions: function() {
var u = navigator.userAgent, app = navigator.appVersion;
return {//移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
};
}(),
anguage: (navigator.browserLanguage || navigator.language).toLowerCase()
}
});
...全文
1354 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
everccnight 2017-06-05
  • 打赏
  • 举报
回复
除了那些 new 的部分 其他的部分 是加载了一个 进度条 为了防止卡顿
$('#video1').css({'width':$(window).width(),'height':Math.floor($(window).width()*1040/640)});
        if(!ios){
            $('#video1').attr({'controls':'controls'});
        }
以及videoInit()是核心
everccnight 2017-06-05
  • 打赏
  • 举报
回复
var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    alert('是否是Android:'+isAndroid);
    alert('是否是iOS:'+isiOS);
上面是判断是否为ios的代码
function loadingInit() {
		$('#video1').css({'width':$(window).width(),'height':Math.floor($(window).width()*1040/640)});
        if(!ios){
            $('#video1').attr({'controls':'controls'});
        }

		loadingLayer = new LSprite();
		addChild(loadingLayer);
		
		containerLayer = new LSprite();
		addChild(containerLayer);
			
		var loading_bg = new LBitmap(new LBitmapData(loading_imglist['loading_bg']));
		loadingLayer.addChild(loading_bg);
		loading_bg.scaleY = border_sy;
		
		var loading_icon = new LBitmap(new LBitmapData(loading_imglist['loading_icon']));
		loadingLayer.addChild(loading_icon);
		loading_icon.x = (gameWidth - loading_icon.width) / 2;
		loading_icon.y=409;

		//loading_num
		var loading_num = new LTextField();
		loadingLayer.addChild(loading_num);
		loading_num.color = '#ffffff';
		loading_num.size = 24;
		loading_num.x = 296;
		loading_num.y = 458;
		var num =0;
        timer =setInterval(function(){
            var tt = Math.random()*5+3;
            num = parseInt(num+tt);
            if(num>100){
                num=100;
            }
            loading_num.text = num +'%';
            if(num==100){
                clearInterval(timer);
                LTweenLite.to(loadingLayer, 0.3, {alpha: 0,onComplete: function() {
                 removeChild(loadingLayer);
                 loadingLayer = null;
                 $("#video1")[0].play();
                 videoInit();
                 }});
            }
        },100);	         
	}
	
		//视频
		function videoInit(){
            
			$('.video').fadeIn(0);
            $('#video1').css({'display':'block','opacity':'1','z-index':'999'});
			
	        var video_ended = false;

            var finish = new LBitmap(new LBitmapData(loading_imglist['end']));
            containerLayer.addChild(finish);
	        
	        $('#video1')[0].addEventListener('ended',function(){
	            videoend();
	        },false);
	        
	        function videoend(){
	            if(!video_ended){
	                video_ended = true;
	                $('#video1')[0].pause();	                
	                $('.video').remove();
	            }
	        }
		}
下面的代码看不懂的Lb那个部分 涉及到 一个h5 的开源引擎lufy 其他的应该都很轻易看懂

39,117

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧