- 浏览: 1075312 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (290)
- php (65)
- javascript (36)
- html5 (31)
- thinkphp (9)
- mysql (16)
- jquery (13)
- node.js (9)
- css (9)
- android 开发 (8)
- flex (5)
- java (3)
- apache (8)
- linux (8)
- git (5)
- web (5)
- wordpress (9)
- mongodb (2)
- redis (5)
- yaf (6)
- python (4)
- big data (1)
- sphinx (1)
- html (1)
- bootstrap (1)
- vue (1)
- laravel (1)
- test (0)
最新评论
-
July01:
推荐用StratoIO打印控件,支持网页、URL、图片、PD、 ...
如何解决非IE浏览器的web打印 -
flashbehappy:
同一个视频,有mp4,ogg两种格式的。在chrome,fir ...
firefox chrom safari 对video标签的区别 -
xmdxzyf:
可以在网站(www.sosoapi.com)上试下在线表单方式 ...
用swagger-php/ui做API测试 -
flex_莫冲:
a2631500 写道"看了源码,设置Backbon ...
backbone与php交互 -
a2631500:
"看了源码,设置Backbone.emulateJS ...
backbone与php交互
video元素在ipad safari上的一些API是无法支持的。比如通过JS代码控制全屏。
我的要求是,页面上只有一个按钮,看不到视频元素,点击该按钮,全屏显示并播放视频,退出视频全屏后也是看不到视频元素的。
那么首先video元素是隐藏的。$(video).css({'visibility' : 'hidden', 'display' : 'none'});
按钮元素的 HTML
video元素的HTML
按钮的事件。注意必须通过jquery的get()函数去调用全屏 API才能实现。
还有还有一个要点。就是如果video元素是动态生成的,一开始的隐藏是必须用css实现的而不能用jquery的hide()函数。否则也是不会全屏的。
参考资料
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
我的要求是,页面上只有一个按钮,看不到视频元素,点击该按钮,全屏显示并播放视频,退出视频全屏后也是看不到视频元素的。
那么首先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
发表评论
-
来自yahoo的web优化规则(YSLOW的23条军规)
2014-09-11 17:53 1613https://developer.yahoo.com/per ... -
ga参数分析
2014-06-25 15:42 633转自http://www.lampblog.net/2011/ ... -
IE8与现代浏览器差异记录
2014-04-09 15:13 8611 不支持.trim()方法 解决方法:用$.trim();代 ... -
如何判断当前窗口是否激活
2013-10-12 17:26 5263http://stackoverflow.com/questi ... -
html5 sse 在chrome、firefox上的不同表现
2013-10-12 12:38 1230虽然两者都实现了html5 sse,但是两者处理方式是不同的。 ... -
PhoneGap3.0发布,使用全新的插件架构
2013-08-05 15:00 1020来源:http://www.newsqueue.net/n/P ... -
让老版本的IE也支持canvas的两种神器
2013-07-26 10:44 6065https://code.google.com/p/explo ... -
使用HTML5的链接预取功能给网站提速
2013-07-25 16:48 940HTML5的链接预取功能(link ... -
慎用manifest
2013-07-18 10:56 3939参考: http://mweb.baidu.com/wp-co ... -
如何让VIDEO tag取消缓存
2013-06-07 12:27 2322video的src是动态生成的。所以会有一个bug,更新了vi ... -
iscroll + sortable element
2013-05-17 20:59 1526为了在iscroll上实现sortable的效果,想了一个星期 ... -
video mediagroup属性说明
2013-05-13 10:37 973参考: http://www.w3school.com.cn/ ... -
iscroll初始化无法生成滚动条的问题解决
2013-05-10 10:20 7169究其原因是因为iscroll无法取得wrapper的offse ... -
iframe in ipad safari
2013-01-08 16:11 5138今天要在web中嵌套一个网址或本地HTML,用到了iframe ... -
app cache 在IOS6上的问题
2012-07-11 16:26 1304ios6号称将app cache从5mb提升到25mb。但是 ... -
HTML5 VIDEO
2012-07-05 17:15 6196位置: 若放一个div或图片在html5的video元素的 ... -
icenium使用心得
2012-06-19 12:03 3986icenium包含以下三个 ... -
获取屏幕宽度和高度
2012-05-15 10:06 2648在android上的浏览器有个设置远近的功能,导致获取到的屏幕 ... -
html5 全屏api
2012-05-09 17:14 1877【进入和退出全屏】 // ... -
html5的离线存储applicationCache应用
2012-05-03 15:26 5592需要注意几点: 1、可 ...
相关推荐
为了解决在safari浏览器video标签无法播放视频的问题
IOS应用源码之【应用】-iConv -convert video files to iPad, iPhone or iPod.rar
Video In to AXI4-Stream v4.0 汉化手册由本人亲自汉化有想要获取可自行下载
【应用】★★★★★-iConv -convert video files to iPad, iPhone or iPod.zip【应用】★★★★★-iConv -convert video files to iPad, iPhone or iPod.zip 1.适合学生学习研究参考 2.适合个人学习研究参考 3.适合...
【应用】-iConv -convert video files to iPad, iPhone or iPod.7z
IOS源码之【应用】iConv -convert video files to iPad, iPhone or iPod.rar
Image and Video Processing in the Compressed Domain presents the fundamentals, properties, and applications of a variety of image transforms used in image and video compression. It illustrates the ...
Image and Video Processing in the Compressed Domain
Eulerian Video Magnification for Revealing Subtle Changes in the World vidmag
Processing in the Cloud Video processing applications are notably data intense, time, and resource consuming. Upfront infrastructure investment is usually high, specially when dealing with ...
Vehicle Detection and Tracking in Car Video Based on Motion Model--This work aims at real-time in-car video analysis to detect and track vehicles ahead for safety, auto-driving, and target tracing....
If you embed audio or video in your website, you should use HTML5.
Image & video steganography in Matlab.zip
This paper addresses the problem of video object segmentation, where the initial object mask is given in the first frame of an input video. We propose a novel spatiotemporal Markov Random Field (MRF) ...
VideoControl - launch a GUI to control image acquisition session: The GUI will help you in: craeting the video object, previewing and snap shotting, controlling frame grabber parameters, saving data ...
Youtube Video in Golang
基于element框架,添加videojs-markers打点标记插件的demo
本文档总结了常用的videojs的方法、事件,并写了几个常用的视频操作实例,比如暂停、插入图片、插入文字、插入视频等
Anomaly Detection using Edge Computing in Video Surveillance System Review.pdf