播放设备音频时不播放视频，反之亦然答案

【问题标题】：Video does not play when device audio is playing and vice versa播放设备音频时不播放视频，反之亦然
【发布时间】：2016-06-26 20:09:32
【问题描述】：

因此，当我的视频加载并开始播放时，来自设备（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>

我愿意尝试任何事情，所以请随时抛出您可能有的任何想法。

【问题讨论】：

见stackoverflow.com/questions/15728424/… 你必须为你的音频创建一个过滤器
这是 Angular 中列出的问题（现已关闭）。这里有一个带有答案的 SO 问题列表和来自角度的官方解决方法github.com/angular/angular.js/issues/1352
@RachelGallen 视频文件是没有音频的 .mp4 文件（我在 Premiere Pro 中对其进行了编辑）。它们是运动视频（每个 3-4 秒），一遍又一遍地循环播放以展示不同的运动动作。我将尝试使用该过滤器并让您知道...谢谢:)
@RachelGallen 顺便说一句，这个应用程序是基于 ionic 框架构建的，适用于 iOS 和 Andriod 应用程序
希望它有效！ :) .. 是的，我知道，我注意到了。但是，过滤器应该会有所帮助

标签： javascript html angularjs ionic-framework

【解决方案1】：

以下代码来自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();
        }
    }

});

从 url (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

【讨论】：