Video does not play when device audio is playing and vice versa

Question

So when my video loads and begins to play, the audio from the device (ipod, spotify) stops playing. If I force the audio to play (by switching over to ipod and pressing play and combing back to my app) the video is frozen. I also tested out an audio file directly in the app and that works perfectly fine while the video is playing. The audio works all through out the app and I placed it in the same UIView as the video. All videos in the app do not have any audio files. I have tried the "muted" preference in the video tag with no luck. This is an essential part of the app and any help would be really appreciated.

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>

I am willing to try anything, so please feel free to throw out any ideas you may have.

see http://stackoverflow.com/questions/15728424/html5-video-is-not-working-with-angularjs-ng-src-tag You have to create a filter for your audio — Rachel Gallen, Jun 26 '16 at 22:15
this was a listed issue (now closed) in angular. There's a list of SO questions with answers and an official workaround from angular here https://github.com/angular/angular.js/issues/1352 — Rachel Gallen, Jun 26 '16 at 22:17
@RachelGallen the video files are .mp4 files with no audio (i edited them in premiere pro). They are exercise videos (3-4 seconds each) looped over and over to demonstrate different exercise moves..I'm going to try that filter and let you know...Thanks:) — MehdiN, Jun 26 '16 at 22:18
@RachelGallen BTW this app is built on ionic framework and intended for iOS and Andriod app — MehdiN, Jun 26 '16 at 22:20
hope it works! :) .. yeah i know, i noticed. but still, the filter should help — Rachel Gallen, Jun 26 '16 at 22:21

score 0 · Answer 1 · answered Jun 26 '16 at 22:48

The following code is from ThePolyGlotDeveloper.com

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

Install 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'])

Create a new controller like so:

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();
        }
    }

});

Play from a 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>

or a local file (index.html file):

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

Watch the tutorial video

Code Source

Video does not play when device audio is playing and vice versa

1 Answers1