我是移动应用程序开发的新手，我正在尝试在 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>
最佳答案
Cordova 流媒体插件
https://github.com/nchutchind/Streaming-Media-Cordova-Plugin
这是用于在 Cordova 中显示视频的工具。
它适用于本地和远程流媒体视频。
使用起来非常简单。
还有这个step-by-step guide用于创建一个调用它的简单演示应用程序。
关于javascript - 适用于移动设备上所有视频文件的 Phonegap/Cordova 视频播放器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29842663/