在适用于 Android、IOS 和桌面设备的 Cordova 应用程序中播放音频和视频答案

【问题标题】：Play audio and video in Cordova application which works in Android, IOS and desktop devices在适用于 Android、IOS 和桌面设备的 Cordova 应用程序中播放音频和视频
【发布时间】：2015-07-29 14:18:46
【问题描述】：

我需要在我的混合应用程序中播放音频和视频，该应用程序应该适用于 Android、IOS 和 Windows 桌面。应用程序构建在使用 Cordova for Mobile 包装的 JQuery Mobile 之上。

HTML5 视频标签在浏览器中有效，但在 Android 中无效。我浏览并发现了一些特定于平台（Android）的插件，我们必须在 .java 文件中添加我不想做的代码。

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

我还查看了 Cordova 的 Media API，发现它适用于音频 (http://cordova.apache.org/docs/en/2.4.0/cordova_media_media.md.html)。

有什么方法可以让我在 Android、IOS 和桌面浏览器中播放音频和视频。

【问题讨论】：

标签： android ios cordova html5-video cordova-plugins

【解决方案1】：

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

在 iOS 上，<audio> 有效，但没有音量控制。
在 Android 上，<audio> 不起作用，需要媒体插件。
在 iOS 上，<audio> 元素的 src 属性可用于 Media 对象，在 Android 上，src 属性可用于js Audio 对象有效。
setVolume()方法必须在play()之后直接调用才能生效。
在 Android 上，从未调用过媒体事件处理程序。这很糟糕，因为根据documentation，release() 方法应该在播放后调用。 此问题尚无解决方案。

该示例有一个静态音频元素，其 src 路径相对于 Cordova 的 www 文件夹中的 index.html。启动时，脚本会检查 Cordova 并设置 DeviceReady 处理程序，如果是的话。然后找到音频元素并通过 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>

【讨论】：