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