javascript Phonegap / Cordova Video Player 适用于移动设备上的所有视频文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29842663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Phonegap / Cordova Video Player for all video files on mobile
提问by Manu Shrivastava
I am new to mobile application development, I am trying to make video player using cordova/phonegap with the help of html5. After searching a lot, I realized that playing a video without native android is not possible. Please help me in this regard, I want my app to fetch all video files from mobile storage and sdcard and list all of them. On clicking a customized video player starts playing that.
I tried this plugin first
https://github.com/amuelli/Html5Video
But no success.
Then, I tried other video plugins available but again no success. A code here I am pasting which gives an ugly output, but that's what I have reached yet, this code is without any plugin.
我是移动应用程序开发的新手，我正在尝试借助 html5 使用cordova/phonegap 制作视频播放器。搜索了很多之后，我意识到在没有原生 android 的情况下播放视频是不可能的。请在这方面帮助我，我希望我的应用程序从移动存储和 SD 卡中获取所有视频文件并列出所有视频文件。单击自定义视频播放器开始播放。
我首先尝试了这个插件
https://github.com/amuelli/Html5Video
但没有成功。
然后，我尝试了其他可用的视频插件，但还是没有成功。我在这里粘贴的代码给出了一个丑陋的输出，但这就是我所达到的，这段代码没有任何插件。
<!DOCTYPE html>
<html>
<head>
<style>
div#video_player_box{ width:550px; background:#000; margin:0px auto;}
div#video_controls_bar{ background: #333; padding:10px; color:#CCC;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
button#playpausebtn{
background:url(pause.png);
border:none;
width:16px;
height:18px;
cursor:pointer;
opacity:0.5;
}
button#playpausebtn:hover{ opacity:1; }
input#seekslider{ width:180px; }
input#volumeslider{ width: 80px;}
input[type='range'] {
-webkit-appearance: none !important;
background: #000;
border:#666 1px solid;
height:4px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
background: #FFF;
height:15px;
width:15px;
border-radius:100%;
cursor:pointer;
}
</style>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and
height=device-height attributes. See
https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1,
maximum-scale=1, minimum-scale=1, width=device-width, height=device-
height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script>
var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn,
volumeslider, fullscreenbtn;
$(document).on('ready',function(){
var video = $("#video");
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('video.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
video.get(0).src = e.target.result;
console.log(video.get(0));
video.get(0).play();
var span = document.createElement('span');
span.innerHTML = "a video file";
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change',
handleFileSelect, false);
});
function intializePlayer(){
// Set object references
vid = document.getElementById("my_video");
vid.addEventListener('click',function(){
vid.play();
},false);
playbtn = document.getElementById("playpausebtn");
seekslider = document.getElementById("seekslider");
curtimetext = document.getElementById("curtimetext");
durtimetext = document.getElementById("durtimetext");
mutebtn = document.getElementById("mutebtn");
volumeslider = document.getElementById("volumeslider");
fullscreenbtn = document.getElementById("fullscreenbtn");
// Add event listeners
playbtn.addEventListener("click",playPause,false);
seekslider.addEventListener("change",vidSeek,false);
vid.addEventListener("timeupdate",seektimeupdate,false);
mutebtn.addEventListener("click",vidmute,false);
volumeslider.addEventListener("change",setvolume,false);
fullscreenbtn.addEventListener("click",toggleFullScreen,false);
}
window.onload = intializePlayer;
function playPause(){
if(vid.paused){
vid.play();
playbtn.style.background = "url(pause.png)";
} else {
vid.pause();
playbtn.style.background = "url(play.png)";
}
}
function vidSeek(){
var seekto = vid.duration * (seekslider.value / 100);
vid.currentTime = seekto;
}
function seektimeupdate(){
var nt = vid.currentTime * (100 / vid.duration);
seekslider.value = nt;
var curmins = Math.floor(vid.currentTime / 60);
var cursecs = Math.floor(vid.currentTime - curmins * 60);
var durmins = Math.floor(vid.duration / 60);
var dursecs = Math.floor(vid.duration - durmins * 60);
if(cursecs < 10){ cursecs = "0"+cursecs; }
if(dursecs < 10){ dursecs = "0"+dursecs; }
if(curmins < 10){ curmins = "0"+curmins; }
if(durmins < 10){ durmins = "0"+durmins; }
curtimetext.innerHTML = curmins+":"+cursecs;
durtimetext.innerHTML = durmins+":"+dursecs;
}
function vidmute(){
if(vid.muted){
vid.muted = false;
mutebtn.innerHTML = "Mute";
} else {
vid.muted = true;
mutebtn.innerHTML = "Unmute";
}
}
function setvolume(){
vid.volume = volumeslider.value / 100;
}
function toggleFullScreen(){
if(vid.requestFullScreen){
vid.requestFullScreen();
} else if(vid.webkitRequestFullScreen){
vid.webkitRequestFullScreen();
} else if(vid.mozRequestFullScreen){
vid.mozRequestFullScreen();
}
}
</script>
</head>
<body>
<div id="video_player_box">
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<video id="my_video" width="550" height="310"
onClick="this.play();">
<source src="" type="video/mp4">
</video>
<div id="video_controls_bar">
<button id="playpausebtn"></button>
<input id="seekslider" type="range" min="0" max="100" value="0"
step="1">
<span id="curtimetext">00:00</span> / <span
id="durtimetext">00:00</span>
<button id="mutebtn">Mute</button>
<input id="volumeslider" type="range" min="0" max="100"
value="100" step="1">
<button id="fullscreenbtn">[ ]</button>
</div>
</div>
</body>
</html>
回答by kris
The Cordova Streaming Media Plugin
Cordova 流媒体插件
https://github.com/nchutchind/Streaming-Media-Cordova-Plugin
https://github.com/nchutchind/Streaming-Media-Cordova-Plugin
This is the one to use for showing videos in Cordova.
It works with local and remote streaming videos.
这是用于在 Cordova 中显示视频的一种。
它适用于本地和远程流媒体视频。
It is quite simple to use.
There is also this step-by-step guidefor creating a simple demo app that calls it which I made.
使用起来非常简单。
还有这个分步指南，用于创建我制作的调用它的简单演示应用程序。
