转载请注明出处
http://blog.csdn.net/u014513456/article/details/54381527
Author:[email protected]
背景
第一篇详解主要是讲解Android客户端需要开发的内容,本篇主要是讲前端在开发中需要特别主要的一个点,全屏播放,ios不用做处理可以直接全屏,而Android客户端需要js特别执行下。
Android WebView Video完全详解(第一篇)-Android开发人员
Android需要做的工作~ 传送门
http://blog.csdn.net/u014513456/article/details/54381361
需要注意的点
android客户端无法全屏,需要特殊的js处理下,而且js的执行需要前端判断下当前运行
<script id="jsbin-javascript">
var videoWrapperElements = document.querySelectorAll('.videoWrapper');
var showFullscreenButton = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false;
for(var i = 0; i < videoWrapperElements.length; i++) {
setUpVideoElement(videoWrapperElements[i]);
}
function setUpVideoElement(videoWrapperElement) {
var videoElement = videoWrapperElement.querySelector('video');
var fullscreenBtn = videoWrapperElement.querySelector('.fullscreenBtn');
if(fullscreenBtn) {
if(showFullscreenButton) {
fullscreenBtn.addEventListener('click', function () {
// Following code from: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
if (videoElement.requestFullscreen) {
videoElement.requestFullscreen();
} else if (videoElement.msRequestFullscreen) {
videoElement.msRequestFullscreen();
} else if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
} else if (videoElement.webkitRequestFullscreen) {
videoElement.webkitRequestFullscreen();
}
});
} else {
fullscreenBtn.style.display = 'none';
}
}
videoElement.addEventListener('click', function(evt) {
if (evt.target.paused) {
evt.target.play();
} else {
evt.target.pause();
}
});
}
</script>
以上就是特别处理的点,大概是需要点击的时候主动调一下全屏的方法,一定是只有android才加载这个js
再来一段更直接的直接给你判断好
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();
// this.pause();
};
}, false);
video.addEventListener("click", function(){
this.play();
video[fullscreenvideo]();
}, false);
video.addEventListener('ended',function(){
doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
},false);
};
// autoFullScrenn(video_obj)
举个栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<style id="jsbin-css">
html, body {
margin: 0;
padding: 0;
}
body {
padding: 16px;
box-sizing: border-box;
}
video {
width: 100%;
max-width: 100%;
background-color: #ffffff;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper object,
.videoWrapper embed,
.videoWrapper video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.videoWrapper .fullscreenBtn {
position: absolute;
bottom: 0;
right: 0;
width: 48px;
height: 48px;
background: none;
border: 0;
margin: 0;
padding: 8px;
}
.videoWrapper .fullscreenBtn svg {
width: 32px;
height: 32px;
fill: #4355B6;
}
</style>
</head>
<body>
<h1>No Poster Attribute</h1>
<div class="videoWrapper">
<video controls>
<source src="http://simpl.info/video/video/chrome.webm" type="video/webm">
<source src="http://simpl.info/video/video/chrome.mp4" type="video/mp4">
<p>This browser does not support the video element.</p>
</video>
</div>
<h1>Poster Attribute</h1>
<div class="videoWrapper">
<video controls poster="file:///android_asset/www/poster.jpg">
<source src="http://simpl.info/video/video/chrome.webm" type="video/webm">
<source src="http://simpl.info/video/video/chrome.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<h1>No Controls</h1>
<div class="videoWrapper">
<video>
<source src="http://simpl.info/video/video/chrome.webm" type="video/webm">
<source src="http://simpl.info/video/video/chrome.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<button class="fullscreenBtn">
<!-- Icon from: https://useiconic.com/open/ -->
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
<path d="M0 0v4l1.5-1.5 1.5 1.5 1-1-1.5-1.5 1.5-1.5h-4zm5 4l-1 1 1.5 1.5-1.5 1.5h4v-4l-1.5 1.5-1.5-1.5z" />
</svg>
</button>
</div>
<script id="jsbin-javascript">
var videoWrapperElements = document.querySelectorAll('.videoWrapper');
var showFullscreenButton = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled ? true : false;
for(var i = 0; i < videoWrapperElements.length; i++) {
setUpVideoElement(videoWrapperElements[i]);
}
function setUpVideoElement(videoWrapperElement) {
var videoElement = videoWrapperElement.querySelector('video');
var fullscreenBtn = videoWrapperElement.querySelector('.fullscreenBtn');
if(fullscreenBtn) {
if(showFullscreenButton) {
fullscreenBtn.addEventListener('click', function () {
// Following code from: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
if (videoElement.requestFullscreen) {
videoElement.requestFullscreen();
} else if (videoElement.msRequestFullscreen) {
videoElement.msRequestFullscreen();
} else if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
} else if (videoElement.webkitRequestFullscreen) {
videoElement.webkitRequestFullscreen();
}
});
} else {
fullscreenBtn.style.display = 'none';
}
}
videoElement.addEventListener('click', function(evt) {
if (evt.target.paused) {
evt.target.play();
} else {
evt.target.pause();
}
});
}
</script>
</body>
</html>
3个video 分别展示三种对视频全屏按钮的样式
Android开发人员可以直接把这个文件拷贝下 名字随便index.html
就可以扔在本地调试了。
demo会有更直接的,不想动手的就直接去下载吧。