个人中心
gpt4 book ai didi

javascript - 适用于移动设备上所有视频文件的 Phonegap/Cordova 视频播放器

转载 作者：行者123 更新时间：2023-11-29 17:38:06 25 4
gpt4 key购买 nike

我是移动应用程序开发的新手，我正在尝试在 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>

最佳答案

Cordova 流媒体插件

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

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

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

关于javascript - 适用于移动设备上所有视频文件的 Phonegap/Cordova 视频播放器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29842663/

25 4 0
文章推荐： android - 如何在 android 中为 EditText 的光标和文本赋予不同的颜色
文章推荐： mysql - 外键关系在 mysql 中不起作用
文章推荐： mysql - phpmyadmin mysql docker 简单链接
文章推荐： mysql - 带有日期和序列字段的 SQL 查询
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com