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

Question

我需要在我的混合应用程序中播放音频和视频，它应该可以在 Android、IOS 和 windows 桌面上运行。应用程序构建在 JQuery Mobile 之上，并使用 Cordova for 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 的媒体 API，我发现它适用于音频 (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 属性有效。
必须在play()之后直接调用setVolume()方法才能生效
在 Android，从未调用媒体事件处理程序。这很糟糕，因为根据documentation，播放后应该调用release()方法。 此问题尚无解决方案。

该示例有一个静态音频元素，其 src 路径相对于 index.html，位于 Cordova 的 www 文件夹中。在启动时，脚本会检查 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>

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

Play audio and video in Cordova application which works in Android, IOS and desktop devices

android

html5-video

ios

cordova

cordova-plugins