Html5 video 可以在浏览器播放,到手机中不能播放????

陈有源 发布于 2015/12/15 21:41
阅读 5K+
收藏 0

用iscroll做了一个下拉刷新,列表里面加载的全是视频;由于在Android中播放了某个视频后,被播放的视频就卡在了最上面,而IOS的播放视频会自动弹出全屏播放就没问题。

于是,我将列表里面换成了图片,加上onclick事件,点击时,再去在页面中append 一个Viedo,然后全屏播放;在浏览器里没可以,但是我到Android和IOS中用UV或者微信访问连接,点击图片没反应。

求大神帮我看看--------------------------------

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>视频列表</title>
<script type="text/javascript" src="iscroll/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="iscroll/iscroll.js"></script>
<script type="text/javascript" src="iscroll/iscrollAssist.js"></script>
<script type="text/javascript">
var maxVideoId = "";
var minVideoId = "";
var iscrollObj;
(function($) {
$(function() {
var pulldownAction = function() {
var content = '';
var requests = {
maxVideoId : maxVideoId,
minVideoId : minVideoId
};
var url = "ajaxJsonQueryVideoListAction.action" + "?data="
+ JSON.stringify(requests);
var content = GetReturnValue(url, '');

$("#video_list").prepend(content);
this.refresh();
//console.log("下拉执行逻辑");
};
var pullupAction = function() {
var content = '';
var requests = {
maxVideoId : maxVideoId,
minVideoId : minVideoId
};

var url = "ajaxJsonQueryVideoListPullUpAction.action"
+ "?data=" + JSON.stringify(requests);
var content = GetReturnValue(url, '');

$('#video_list').append(content);
this.refresh();
//console.log("上拉执行逻辑");
};
iscrollObj = iscrollAssist.newVerScrollForPull($('#wrapper'),
pulldownAction, pullupAction);
iscrollObj.refresh();
});
})(jQuery);

function GetReturnValue(url, jsonText) {
var content = "";
$.ajax({
type : "POST",
url : url,
data : jsonText,
contentType : "application/json;charset=utf-8",
dataType : "json",
async : false,//同步  
success : function(data) {
var dataRole = eval(data);
if (dataRole != '' && dataRole.length > 0) {
for (var i = 0; i < dataRole.length; i++) {
var videoId = dataRole[i].videoId;
var title = dataRole[i].title;
var videoCoverPath = dataRole[i].videoCoverPath;
var videoPath = dataRole[i].videoPath;


if (maxVideoId == ""
|| parseInt(maxVideoId) < parseInt(videoId)) {
maxVideoId = videoId;
}
if (minVideoId == ""
|| parseInt(minVideoId) > parseInt(videoId)) {
minVideoId = videoId;
}

content = content + "<dd>";
content = content + "<div class=\"video_box\" "
+ " style=\"background: url('" + videoCoverPath + "');  "
+ " filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')'; "
+ " -moz-background-size:100% 100% ;background-size:100% 100%; \">" ;
content = content + "<img onclick=\"onPlayVideo('" + videoPath + "');\" src=\"images/player.jpg\"> ";
content = content + "</div>";
content = content + "</dd>";
}
}
},
failure : function() {
content = "";
}
})
return content;
}

window.onload=function(){
var content = '';
var requests = {
maxVideoId : '',
minVideoId : ''
};
var url = "ajaxJsonQueryVideoListAction.action" + "?data="
+ JSON.stringify(requests);
var content = GetReturnValue(url, '');
$("#video_list").prepend(content);
iscrollObj.refresh();
}  
</script>
<style>
/****** 下拉刷新、上拉加载更多的样式********/
#pulldown,#pullup {
background: #fff;
height: 40px;
line-height: 40px;
padding: 5px 10px;
border-bottom: 1px solid #ccc;
font-weight: bold;
font-size: 14px;
color: #888;
}

#pulldown .pulldown-icon,#pullup .pullup-icon {
display: block;
float: left;
width: 40px;
height: 40px;
background: url(images/pull-icon@2x.png) 0 0 no-repeat;
-webkit-background-size: 40px 80px;
background-size: 40px 80px;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 250ms;
}

#pulldown .pulldown-icon {
-webkit-transform: rotate(0deg) translateZ(0);
}
#pullup .pullup-icon {
-webkit-transform: rotate(-180deg) translateZ(0);
}
#pulldown.flip .pulldown-icon {
-webkit-transform: rotate(-180deg) translateZ(0);
}

#pullup.flip .pullup-icon {
-webkit-transform: rotate(0deg) translateZ(0);
}

#pulldown.loading .pulldown-icon,#pullup.loading .pullup-icon {
background-position: 0 100%;
-webkit-transform: rotate(0deg) translateZ(0);
-webkit-transition-duration: 0ms;
-webkit-animation-name: loading;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

@-webkit-keyframes loading {from { -webkit-transform:rotate(0deg)translateZ(0);
}
to {
-webkit-transform: rotate(360deg) translateZ(0);
}
}
body {
font-size: 12px;
-webkit-user-select: none;
-webkit-text-size-adjust: none;
font-family: helvetica;
}

#wrapper {
position: absolute;
z-index: 1;
top: 0px;
bottom: 0px;
background: #aaa;
width: 100%;
height: 100%;
overflow: hidden;
}

#video_list {
width: 100%;
margin: 0 auto;
}

#wrapper dl {
list-style: none;
-webkit-margin-before: 0em;
text-align: center;
width: 100%;
margin: 0;
}

#wrapper dd {
width: 100%;
height: 246px;
line-height: 246px;
margin: 0;
/* border-bottom: 1px solid #ccc;
border-top: 1px solid #fff; */
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
background-color: #fafafa;
font-size: 14px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-right: 100px;
}

.video_container {
width: 100%;
height: auto;
min-height: 246px;
}

.video_box {
width: 100%;
height: 100%;
}

.video_box img {
width: 80px;
height: 80px;
vertical-align: middle;
}

#videDIVId {
top: 0px;
bottom: 0px;
}
</style>
</head>
<body
style="overflow-y:hidden;position:absolute;left:0em;right:0em;top:0em;bottom:0em;margin:0em">
<div id="wrapper">
<dl>
<div id="pulldown">
<span class="pulldown-icon"></span><span id="pulldown-label"></span>
</div>
<div id="video_list">
</div>
<div id="pullup">
<span class="pullup-icon"></span><span id="pullup-label"></span>
</div>
</dl>
</div>
<div id="videDIVId">
<!-- <video id="myVideo" width="1" height="1"
src="http://192.168.0.54:8080/video/1449561689647_oceans-clip.mp4">
</video> -->
</div>
</body>

<script>
var videDIVId = document.getElementById('videDIVId');
var tolTime = 0; //总时长
var currentTime;
function onPlayVideo(videoPath) {
var isOnPlay = true;

videDIVId.innerHTML="";
var content = "<video id=\"myVideo\" width=\"1\" height=\"1\" " 
+ " src=\""+videoPath+"\" "
+ " </video>";
$('#videDIVId').append(content);

var myVideo = document.getElementById('myVideo');

/*全屏播放方法一*/
//autoFullScrenn(myVideo,isOnPlay);


/*全屏播放方法二*/
myVideo.play();
gotoFunllScreen(myVideo);

//总时长
myVideo.addEventListener("loadedmetadata", function() {
tolTime = myVideo.duration;//获取总时长
}); 
//播放时间点更新时
myVideo.addEventListener("timeupdate", function() {
var currentTime = myVideo.currentTime;//获取当前播放时间
console.log(currentTime);//在调试器中打印
});

}

/*全屏播放方法一*/
var fullscreen = function(element) {
var prefix = 'webkit';
if (element['requestFullscreen']) {
return 'requestFullscreen';
} else if (element['mozRequestFullScreen']) {
return 'mozRequestFullScreen';
} else if (element['msRequestFullscreen']) {
return 'msRequestFullscreen';
} else if (element['oRequestFullscreen']) {
return 'oRequestFullscreen';
} else if (element[prefix + 'EnterFullScreen']) {
return prefix + 'EnterFullScreen';
} else if (element[prefix + 'RequestFullScreen']) {
return prefix + 'RequestFullScreen';
}; 
return false;
};
function autoFullScrenn(v,isOnPlay) {
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) {
alert("不支持全屏模式");
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() {
setTimeout(function() {
document.webkitCancelFullScreen(); //播放完毕自动退出全屏
}, 1000);
}, false);

if(isOnPlay){
setTimeout(function() {
video.play();
video[fullscreenvideo]();
}, 200);

}
};
//autoFullScrenn(myVideo);

/*全屏播放方法二*/
//反射調用
var invokeFieldOrMethod = function(element, method) {
var usablePrefixMethod;
[ "webkit", "moz", "ms", "o", "" ].forEach(function(prefix) {
if (usablePrefixMethod)
return;
if (prefix === "") {
// 无前缀,方式首字母小写
method = method.slice(0, 1).toLowerCase() + method.slice(1);
}
var typePrefixMethod = typeof element[prefix + method];
if (typePrefixMethod + "" !== "undefined") {
if (typePrefixMethod === "function") {
usablePrefixMethod = element[prefix + method]();
} else {
usablePrefixMethod = element[prefix + method];
}
}
});

return usablePrefixMethod;
};

//進进全屏
function launchFullscreen(element) {
//此方式不成以在異步任務中執行,否則火狐無法全屏
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.oRequestFullscreen) {
element.oRequestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();
} else {

var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('videDIVId');
var cssText = 'width:100%;height:100%;overflow:hidden;';
docHtml.style.cssText = cssText;
docBody.style.cssText = cssText;
videobox.style.cssText = cssText + ';' + 'margin:0px;padding:0px;';
document.IsFullScreen = true;

}
}
//退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.oRequestFullscreen) {
document.oCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else {
var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('videobox');
docHtml.style.cssText = "";
docBody.style.cssText = "";
videobox.style.cssText = "";
document.IsFullScreen = false;
}

myVideo.pause();
}

function gotoFunllScreen(myVideo) {
launchFullscreen(myVideo);

myVideo.addEventListener('ended', function() {
setTimeout(function() {
document.webkitCancelFullScreen(); //播放完毕自动退出全屏
}, 1000);
}, false);
myVideo.addEventListener("webkitfullscreenchange", function(e) {
if (!document.webkitIsFullScreen) {//退出全屏暂停视频
this.pause();
};
}, false);
myVideo.addEventListener("click", function() {
this.play();
launchFullscreen(myVideo);
//launchFullscreen(video);
}, false);

}
</script>
</html>

---------------------------------------------js代码-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

iScroll版本 v5.0.5;

iscrollAssist.js中代码:

/**
 * 滚动辅助模块
 * @author 564539969@qq.com
 * @since 2013-07-26
 */
;(function($,window){

//模块对外提供的公共方法
var exportsMethods = {

/**
* 新建一个竖直滚动实例,并做一些处理,整合上拉下拉的功能
* wrapper        要渲染滚动实例的位置
* pulldownAction 下拉执行的逻辑
* pullupAction   上拉执行的逻辑
* opts           滚动个性化参数 
* pullText       拉动时不同状态要显示的文字
*/
newVerScrollForPull : function(wrapper,pulldownAction,pullupAction,opts,pullText){

var $wrapper ;
if(typeof wrapper === 'string'){
$wrapper = $(wrapper);
}else if(typeof wrapper === 'object'){
$wrapper = wrapper;
}

var pulldownRefresh   = pullText && pullText['pulldownRefresh'] ? pullText['pulldownRefresh'] : '下拉刷新...',
pullupLoadingMore = pullText && pullText['pullupLoadingMore'] ? pullText['pullupLoadingMore'] : '上拉加载更多...',
pullupLoadingNoMore = pullText && pullText['pullupLoadingMore'] ? pullText['pullupLoadingMore'] : '没有更多了',
releaseToRefresh  = pullText && pullText['releaseToRefresh'] ? pullText['releaseToRefresh'] : '松手开始刷新...',
releaseToLoading  = pullText && pullText['releaseToLoading'] ? pullText['releaseToLoading'] : '松手开始加载...',
loading  = pullText && pullText['loading'] ? pullText['loading'] : '加载中...';

var $pulldown = $wrapper.find('#pulldown'),
$pullup   = $wrapper.find('#pullup'),
pullupOffset   = 0,
pulldownOffset = 0;

if($pulldown.length>0){
pulldownOffset = $pulldown.outerHeight();
$pulldown.find('#pulldown-label').html(pulldownRefresh);
}

if($pullup.length>0){
pullupOffset = $pullup.outerHeight();
$pullup.find('#pullup-label').html(pullupLoadingMore);
}

//这个属性很重要,目前V5版本不支持,需修改源码
var options = {
topOffset : pulldownOffset
};

$.extend(true,options,opts);

var scrollObj = this.newVerScroll($wrapper[0],options);

//滚动刷新触发的事件
scrollObj.on('refresh',function(){

var $pulldown = $wrapper.find('#pulldown'),
$pullup   = $wrapper.find('#pullup');

if ($pulldown.length>0 && $pulldown.hasClass('loading')) {
$pulldown.removeClass();
$pulldown.find('#pulldown-label').html(pulldownRefresh);
} else if ($pullup.length>0){
$pullup.find('#pullup-icon').show();
if($pullup.hasClass('loading')){
$pullup.find('#pullup-icon').show();
$pullup.removeClass();
$pullup.find('#pullup-label').html(pullupLoadingMore);
}
}
});

//滚动的时候触发的事件
scrollObj.on('scrollMove',function(){

var $pulldown = $wrapper.find('#pulldown'),
$pullup   = $wrapper.find('#pullup');

if ($pulldown.length>0 && this.y > 5 && !$pulldown.hasClass('flip')) {
$pulldown.removeClass().addClass('flip');
$pulldown.find('#pulldown-label').html(releaseToRefresh);
this.minScrollY = 0;

} else if ($pulldown.length>0 && this.y < 5 && $pulldown.hasClass('flip')) {
$pulldown.removeClass();
$pulldown.find('#pulldown-label').html(pulldownRefresh);
this.minScrollY = -pulldownOffset;
//this.y < this.minScrollY代表是上拉,以防下拉的时候未拉到尽头时进入上拉的逻辑中
} else if ($pullup.length>0 && this.y < this.minScrollY && this.y < (this.maxScrollY - 5) && !$pullup.hasClass('flip')) {
$pullup.removeClass().addClass('flip');
$pullup.find('#pullup-label').html(releaseToLoading);
this.maxScrollY = this.maxScrollY;

} else if ($pullup.length>0 && (this.y > (this.maxScrollY + 5)) && $pullup.hasClass('flip')) {
$pullup.removeClass();
$pullup.find('#pullup-label').html(pullupLoadingMore);
this.maxScrollY = pullupOffset;
}
});

//滚动结束之后触发的事件
scrollObj.on('scrollEnd',function(){

var $pulldown = $wrapper.find('#pulldown'),
$pullup   = $wrapper.find('#pullup');

if ($pulldown.length>0 && $pulldown.hasClass('flip')) {
$pulldown.removeClass().addClass('loading');
$pulldown.find('#pulldown-label').html(loading);
if(typeof pulldownAction === 'function'){
pulldownAction.call(scrollObj);
}
} else if ($pullup.length>0 && $pullup.hasClass('flip')) {
$pullup.removeClass().addClass('loading');
$pullup.find('#pullup-label').html(loading);
if(typeof pullupAction === 'function' && $pullup.parent().length>0){
pullupAction.call(scrollObj);
}
}
});

return scrollObj;
},
/**
* 创建一个竖直方向的滚动实例
* @param obj    dom对象或者选择字符串
* @param option 滚动其他属性
* @return IScroll实例对象
*/
newVerScroll : function(dom,option){
var opt = {
scrollbars : true, //是否有滚动条
useTransition: false
};
if(option){
$.extend(opt,option);
}
var iSObj = new IScroll(dom,opt);

//滚动条在滚动时显示出来,滚动结束隐藏
//V5以前版本有个参数可以设置,V5之后目前只能手动处理滚动条的显示隐藏或者可从外部传个参数进来判断
iSObj.on("scrollEnd",function(){
if(this.indicator1){
this.indicator1.indicatorStyle['transition-duration'] = '350ms';
this.indicator1.indicatorStyle['opacity'] = '0';
}
});
iSObj.on("scrollMove",function(){
if(this.indicator1){
this.indicator1.indicatorStyle['transition-duration'] = '0ms';
this.indicator1.indicatorStyle['opacity'] = '0.8';
}
});
return iSObj;
}
};

window.iscrollAssist = exportsMethods;

})(jQuery,window);

加载中
返回顶部
顶部