播放设备音频时视频无法播放,反之亦然

时间:2016-06-26 20:09:32

标签: javascript html angularjs ionic-framework

因此,当我的视频加载并开始播放时,来自设备的音频(ipod,spotify)将停止播放。如果我强制播放音频(通过切换到iPod并按播放并梳理回我的应用程序),视频将被冻结。我还直接在应用程序中测试了一个音频文件,并且在播放视频时效果非常好。音频在整个应用程序中运行,我将其放在与视频相同的UIView中。应用中的所有视频都没有任何音频文件。我在视频标签中尝试了“静音”偏好而没有运气。这是应用程序的重要组成部分,任何帮助都会非常感激。

HTML:

<div style="height:85%;width:100%;border:0px solid purple;border-radius:100px;margin-left:auto;margin-right:auto;margin-top:0%;" ng-click="showIt();" on-swipe-right="prev()" on-swipe-left="next()">

    <video webkit-playsinline muted autoplay loop ng-src="{{keeper}}" style="width:100%;height:100%;border:0px solid white;border-radius:100px;z-index:1;">
    </video>

</div>

我愿意尝试任何事情,所以请随意抛弃你可能有的任何想法。

1 个答案:

答案 0 :(得分:0)

以下代码来自ThePolyGlotDeveloper.com

ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

安装Apache Cordova Media PluginShell

cordova plugin add org.apache.cordova.media

的index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="js/ng-cordova.min.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">
   //important to note that ng-cordova.min.js must come before cordova.js in your script includes.  Your project will not work correctly if it comes after.


    app.js

     angular.module('starter', ['ionic', 'ngCordova'])

像这样创建一个新的控制器:

app.js

example.controller("ExampleController", function($scope, $cordovaMedia, $ionicLoading) {

    $scope.play = function(src) {
        var media = new Media(src, null, null, mediaStatusCallback);
        $cordovaMedia.play(media);
    }

    var mediaStatusCallback = function(status) {
        if(status == 1) {
            $ionicLoading.show({template: 'Loading...'});
        } else {
            $ionicLoading.hide();
        }
    }

});

从网址(index.html)播放

<ion-content ng-controller="ExampleController">
    <button class="button" ng-click="play('http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2013.mp3')">Play from internet</button>
</ion-content>

或本地文件(index.html文件):

<ion-content ng-controller="ExampleController">
    <button class="button" ng-click="play('www/mp3/song.mp3')">Play from file system</button>
</ion-content>

观看tutorial video

Code Source

相关问题