video element in ipad safari
2017-03-28 14:16
337 查看
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
相关文章推荐
- video element in HTML
- iframe in ipad safari
- 如何让 Firefox,Chrome,Safari 浏览器模拟 iPad User Agent
- Write an algorithm such that if an element in an MxN matrix is 0, its entire row and column is set to 0.
- JavascriptExecutor click invisible element in Selenium webDriver
- Kth Largest Element in an Array
- 378. Kth Smallest Element in a Sorted Matrix leetcode binary_search 378
- Leetcode 230. Kth Smallest Element in a BST
- Kth Largest Element in an Array
- [LeetCode]215. Kth Largest Element in an Array
- LeetCode: 378. Kth Smallest Element in a Sorted Matrix
- Note: This element has no attached source and Javadoc could not be found in the attached Javadoc解决办法
- Using the PopoverView in iPad App Development
- MyBatis(IncompleteElementException: Could not find result map com.hao.mapper.PersonTestMapper.=Base)
- update location element in web.config
- FAQ(38):nested exception is org.apache.ibatis.builder.IncompleteElementException: Could not find res
- leetcode:Kth Smallest Element in a BST
- Element (center) is obsolete. Its use is discouraged in HTML5 documents
- leetcode-215. Kth Largest Element in an Array(基于堆排序)
- Kth Smallest Element in a BST