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
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.
<!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
-->
<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>
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./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.
<!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/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>
- 2 Are you sure that you already tested the official cordova media plugin? github./apache/cordova-plugin-media – Sithys Commented Apr 24, 2015 at 8:44
- Nope, I haven't tried that. – Manu Shrivastava Commented Apr 24, 2015 at 8:50
- Sithys, That plugin provides the ability to record and play back audio files on a device. Any help for video files? – Manu Shrivastava Commented Apr 24, 2015 at 8:55
- Sorry for that Manu, thats correct. What about the cordova video player? github./moust/cordova-plugin-videoplayer – Sithys Commented Apr 24, 2015 at 9:00
- Sithys you're helping me. Please don't be sorry. And I'm afraid that this particular plugin is not supporting file fetching. – Manu Shrivastava Commented Apr 24, 2015 at 9:28
1 Answer
Reset to default 3The Cordova Streaming Media Plugin
https://github./nchutchind/Streaming-Media-Cordova-Plugin
This is the one to use for showing videos in Cordova.
It works with local and remote streaming videos.
It is quite simple to use.
There is also this step-by-step guide for creating a simple demo app that calls it which I made.