在Cordova应用程序中播放音频和视频，该应用程序适用于Android, IOS和桌面设备

Question

我需要在我的混合应用程序中播放音频和视频，这应该适用于Android, IOS和windows桌面。应用程序是建立在JQuery移动包与Cordova移动。

HTML5视频标签在浏览器中工作，但在Android中不工作。我浏览了一下，发现了一些特定于平台(Android)的插件，我们必须在.java文件中添加代码，这是我不想做的。

<video width="350" height="150" controls>
            <source  type="video/m4v" src="http://techslides.com/demos/sample-videos/small.mp4" >
 </video>

我也看了媒体API的Cordova，我发现工作与音频(http://cordova.apache.org/docs/en/2.4.0/cordova_media_media.md.html)。

是否有任何方法，我可以播放音频以及视频，在Android, IOS和桌面浏览器的工作

Answer 1

经过几个小时的问题发现，这个解决方案适用于我，在桌面和移动浏览器以及iOS和Android上的Cordova。它解决了以下发现:

• 在iOS上，<audio>工作，但没有音量控制。
• 在Android上，<audio>不工作，需要Media插件
• 在iOS上，<audio>元素的src属性可以用于Media对象，在Android上，js Audio对象的src属性有效。
• setVolume()方法必须在play()之后直接调用才能生效。在Android上，Media事件处理程序永远不会被调用。这很糟糕，因为根据文档，应该在播放之后调用release()方法。

这个例子有一个静态音频元素，它的src路径相对于index.html，位于Cordova的www文件夹中。在启动时，脚本检查Cordova并设置DeviceReady处理程序(如果是)。然后找到audio元素并通过playAudio()播放。 HTML头:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">
<title>Audio Example</title>
<script src="cordova.js"></script>
<script>
    var config = {
        audioVolume: 0.25
    }
    // Use onDeviceReady if we run in Cordova
    window.addEventListener('load', function(){
        if (window.Cordova) {
            console.log("Cordova found");
            document.addEventListener('DeviceReady', start, false);
        } else {
            console.log("Cordova not found, using pure html audio")
            start();
        }
    }, false);
    function start() {
        var audioElement = document.querySelector("audio");
        playAudio(audioElement);
    }
    function playAudio(ae) {
        var source, me, successFunction, onSuccess, onError;
        onSuccess = function() {
            console.log('Playing ' + ae.src + ' at volume ' + config.audioVolume);
            me.release();
        }
        onError = function(e) {
            console.log('ERROR on playing ' + ae.src + ' at volume ' + config.audioVolume
                        + ': (' + e.code + ') ' + e.message);
        }
        onStatusChange = function(s){
            console.log('Media status changed to ' + s);
            if (s === Media.MEDIA_STOPPED) onSuccess();
        }
       // If running in Cordova and Media plugin loaded, use that
        if (typeof Media === "function") { 
            source = device.platform === 'iOS'
                        ? ae.getAttribute('src')     // relative path
                        : ae.src;                    // file-url, platform-dependant
            me = new Media(source, onSuccess, onError, onStatusChange);
            me.play();     
            me.setVolume(config.audioVolume);   
        } else {
            ae.volume = config.audioVolume;
            ae.play();
        }
    }
</script>

HTML身体:

<audio src="sounds/mysound.mp3"></audio>