Question

我是移动应用程序开发的新手，我试图在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">[ &nbsp; ]</button>
        </div>
    </div>

</body>
</html>

Answer 1

Cordova流媒体插件

https://github.com/nchutchind/Streaming-Media-Cordova-Plugin

这是用于在Cordova中显示视频的那个它适用于本地和远程流媒体视频。

使用起来非常简单还有这个step-by-step guide用于创建一个简单的演示应用程序来调用它。

适用于移动设备上所有视频文件的Phonegap / Cordova Video Player

1 个答案:

Cordova流媒体插件