title: Phonegap / Cordova Video Player for all video files on mobile
body: <p>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.<br>
  I tried this plugin first<br>
  <a href="https://github.com/amuelli/Html5Video" rel="nofollow">https://github.com/amuelli/Html5Video</a><br>
  But no success.<br>
  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.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
      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;
          }
  &lt;/style&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="format-detection" content="telephone=no" /&gt;
      &lt;meta name="msapplication-tap-highlight" content="no" /&gt;
      &lt;!-- WARNING: for iOS 7, remove the width=device-width and   
        height=device-height attributes. See 
      https://issues.apache.org/jira/browse/CB-4323 --&gt;
      &lt;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" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/index.css" /&gt;
      &lt;title&gt;Hello World&lt;/title&gt;
      &lt;script&gt;
      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 &lt; 10){ cursecs = "0"+cursecs; }
      if(dursecs &lt; 10){ dursecs = "0"+dursecs; }
      if(curmins &lt; 10){ curmins = "0"+curmins; }
      if(durmins &lt; 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();
          }
      }
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="video_player_box"&gt;
          &lt;input type="file" id="files" name="files[]" multiple /&gt;
          &lt;output id="list"&gt;&lt;/output&gt;
          &lt;video id="my_video" width="550" height="310" 
          onClick="this.play();"&gt;
          &lt;source src="" type="video/mp4"&gt;
          &lt;/video&gt;
          &lt;div id="video_controls_bar"&gt;
              &lt;button id="playpausebtn"&gt;&lt;/button&gt;
              &lt;input id="seekslider" type="range" min="0" max="100" value="0" 
              step="1"&gt;
              &lt;span id="curtimetext"&gt;00:00&lt;/span&gt; / &lt;span 
               id="durtimetext"&gt;00:00&lt;/span&gt;
              &lt;button id="mutebtn"&gt;Mute&lt;/button&gt;
              &lt;input id="volumeslider" type="range" min="0" max="100" 
              value="100" step="1"&gt;
              &lt;button id="fullscreenbtn"&gt;[ &amp;nbsp; ]&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;   
  </code></pre>