html5中使用video标签播放本地视频不显示图像,只有声音,全屏没问题,求解决方案

如题。

不全屏时,无法看到图像。

目前是通过默认全屏来规避的。

代码如下

<!DOCTYPE html>

<html>



<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<meta name="HandheldFriendly" content="true" />

<meta name="MobileOptimized" content="320" />

<title></title>

<script src="js/mui.min.js"></script>

<link href="css/mui.min.css" rel="stylesheet" />

<style>

html,

body {

height: 100%;

}

.mui-content {

position: fixed;

top: 50px;

bottom: 10px;

left: 0;

right: 0;

}

video {

display: block;

margin: 0 auto;

max-width: 100%;

}

</style>

</head>



<body>

<header class="mui-bar mui-bar-nav">

<h1 class="mui-title">播放视频</h1>

<button class="mui-btn mui-btn-link mui-pull-right" id='btnV'>选择</button>

</header>

<div class="mui-content">

<div style="width:100%;height:100%;display:table;position: relative;">

<div style="display:table-cell;vertical-align:middle;">

<video id="video" autoplay controls></video>

</div>

</div>



</div>

<script type="text/javascript">

mui.init();

mui.plusReady(function() {});

var galleyVideos = function() {

plus.gallery.pick(function(pth) {

var v = document.getElementById('video');

v.src = pth;

//自动全屏

//autoFullScrenn(v);

}, function(e) {

console.log(JSON.stringify(e));

}, {

filter: 'video'

});

};

document.getElementById("btnV").addEventListener('tap', galleyVideos);

var fullscreen = function(elem) {

var prefix = 'webkit';

if (elem[prefix + 'EnterFullScreen']) {

return prefix + 'EnterFullScreen';

} else if (elem[prefix + 'RequestFullScreen']) {

return prefix + 'RequestFullScreen';

};

return false;

};



function autoFullScrenn(v) {

// 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() {

doc.webkitCancelFullScreen(); //播放完毕自动退出全屏

}, false);

};

</script>

</body>



</html>

\n

2015-07-06 13:08 添加评论 分享
已邀请:

最佳回复

0

APICLOUD

赞同来自:

有没有试过在线视频全屏


0

chender - 与人为善

赞同来自:

我这边是联网时播放本地文件没问题,没联网时一播放进度条就直接到结束的地方去了


0

gadget2k

赞同来自:

支持一下。我也是这个问题。


0

小布点

赞同来自:

您好,请问您的问题现在解决了吗?知道是什么引起的吗?我现在也遇到了类似的问题,小屏只有声音没有图像,但在全屏正常播放。


0

B5教程网 - http://www.bcty365.com

赞同来自:

来这里学习一下


0

素材火 - http://www.sucaihuo.com/

赞同来自:

我的情况 刚好相反,有图像没声音,不过是不兼容某些手机,并不是全部,有人遇到过同样的情况吗


0

534123074@qq.com

赞同来自:

是不是视频格式问题?


要回复问题请先登录注册