Ionic-framework: bug: Embedding video does not play sound

Created on 24 Apr 2015 · 11Comments · Source: ionic-team/ionic-framework

Type: bug

Platform: ios 8 webview

This is my code which I took from someone else who commented... I made sure my sound was turned up. This worked in the ios emulator, but not on my actual device

<html ng-app="youtubeList">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Youtube List</title>

    <link href="lib/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.min.js"></script>
    <script src="cordova.js"></script>
  </head>
<style>
  .video-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
    }

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
<script>
  'use strict';

angular.module('youtubeList', ['ionic'])

.config(function($stateProvider, $urlRouterProvider, $sceDelegateProvider) {

  $sceDelegateProvider.resourceUrlWhitelist(['self', new RegExp('^(http[s]?):\/\/(w{3}.)?youtube\.com/.+$')]);
})

.controller('ListCtrl', function() {
  var vm = this;
  vm.media = [{
    "Url": "https://www.youtube.com/embed/DX1iplQQJTo?rel=0",
    "Title": "Test Title"
  }, {
    "Url": "https://www.youtube.com/embed/DX1iplQQJTo?rel=0",
    "Title": "Test Title"
  }, {
    "Url": "https://www.youtube.com/embed/DX1iplQQJTo?rel=0",
    "Title": "Test Title"
  }, {
    "Url": "https://www.youtube.com/embed/DX1iplQQJTo?rel=0",
    "Title": "Test Title"
  }, {
    "Url": "https://www.youtube.com/embed/DX1iplQQJTo?rel=0",
    "Title": "Test Title"
  }, {
    "Url": "https://www.youtube.com/embed/DX1iplQQJTo?rel=0",
    "Title": "Test Title"
  }]
});
</script>
  <body>
    <ion-pane>
        <ion-header-bar class="bar-stable">
            <h1 class="title">Youtube List</h1>
        </ion-header-bar>
        <ion-content>
            <div class="list" ng-controller="ListCtrl as vm">
                <div class="card" ng-repeat="m in vm.media">
                    <div class="item item-text-wrap">
                        <p>{{m.Title}}</p>
                    </div>

                    <div class="item item-image">
                        <div class="video-container">
                            <iframe src="{{m.Url}}" frameborder="0" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </ion-content>
    </ion-pane>
  </body>
</html>

Source

loomtronic

Most helpful comment

If I set "Use side switch to:" in my general settings of my ipad to "Lock Rotation", the sound works. If I set it to Mute, the sound doesn't work.

So I had my hardware switch set so it was muted...

but it doesn't seem like the sound should be off?

https://support.apple.com/en-us/HT204171
When you mute your iPad, you won't hear these sounds:
Alerts
Notifications
Sound effects
Game audio

You'll still hear sound from your media, such as these:
Music
Podcasts
Movies
Videos
TV shows

loomtronic on 24 Apr 2015

👍2

All 11 comments

Hi, try ng-src, instead of src

waparty on 24 Apr 2015

If doesn't help, please use this plugin: https://github.com/Glitchbone/CordovaYoutubeVideoPlayer

waparty on 24 Apr 2015

@waparty Unfortunately neither of those solutions seem to work...

loomtronic on 24 Apr 2015

And actually I need to get it working for vimeo video
On Apr 24, 2015 2:47 AM, "Paulius Marciukaitis" [email protected]
wrote:

If doesn't help, please use this plugin:
https://github.com/Glitchbone/CordovaYoutubeVideoPlayer

—
Reply to this email directly or view it on GitHub
https://github.com/driftyco/ionic/issues/3602#issuecomment-95874850.

loomtronic on 24 Apr 2015

If I set "Use side switch to:" in my general settings of my ipad to "Lock Rotation", the sound works. If I set it to Mute, the sound doesn't work.

So I had my hardware switch set so it was muted...

but it doesn't seem like the sound should be off?

https://support.apple.com/en-us/HT204171
When you mute your iPad, you won't hear these sounds:
Alerts
Notifications
Sound effects
Game audio

You'll still hear sound from your media, such as these:
Music
Podcasts
Movies
Videos
TV shows

loomtronic on 24 Apr 2015

👍2

Well according to @mhartington this is just the way it is

"That makes sense. The audio will be treated as sound effects on iOS, so they will be muted. Not sure how much can be done here. You would either have to write a cordova plugin that could circumvent this."

loomtronic on 24 Apr 2015

👎1

Thank you for posting this. My phone was on mute too and I thought I had a bug. This sucks.

dwilt on 5 Feb 2016

👍1

My first question would be, Why is this being treated as a sound effect when it clearly not. Is this an Ionic issue? or a Cordova issue?

Does anyone have any suggestion on how to circumvent this problem?
I am using ng-youtube-embed in project using Ionic 1.3.3, Cordova 7.0.1.

Pseudo-Nym on 18 Sep 2017

Install cordova-plugin-avaudiosession plugin
Add this line to config.xml

<preference name="AVAudioSession" value="AVAudioSessionCategoryPlayback" />

See https://developer.apple.com/library/content/documentation/Audio/Conceptual/AudioSessionProgrammingGuide/AudioSessionCategoriesandModes/AudioSessionCategoriesandModes.html

chuchuva on 10 Apr 2018

❤1

@chuchuva has the truth. Thanks!!!

dimadev01 on 14 Aug 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.