Can't play embed video in

ionic-v1
1

When I try embed video from youtube.com and put it on <ion-content></ion-content> it’s not working. Video does not start playing, if you click on it.
I don’t need iframe method, because I want use other players which embed in <object> format.

I use next code for example:

<ion-content>
  <div class="video-container">
    <object width="560" height="315">
      <param name="movie" value="//www.youtube.com/v/WzhW20hLp6M?hl=uk_UA&amp;version=3&amp;rel=0"/>
      <param name="allowFullScreen" value="true"/>
      <param name="allowscriptaccess" value="always"/>
      <embed src="//www.youtube.com/v/WzhW20hLp6M?hl=uk_UA&amp;version=3&amp;rel=0" type="application/x-shockwave-flash"
               width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
    </object>
  </div>
</ion-content>
2

Take a look at this to see how doing with just regular AngularJS.

I bet you are running into a secure content issue. See the $sce.trustAsResourceUrl in their directive.

3

Thanks for response, but looks like problem not in Angular, but in Ionic. I don’t have problem with adding video into app, but have problem with working with embed video.
In some reason, Ionic prevent click event on videos which embedded in <ion-content></ion-content>.

Please, look in example: http://plnkr.co/edit/XmyAhE?p=preview

4

I got things to work, but what I had to do was switch to an iframe.

Not sure why using an object would create a problem, any ideas @Calendee?

5

I can’t make a better solution. I dabbled with z-index and such with no luck.

I will reach out for some help with this.

6

Opened Issue # 723. https://github.com/driftyco/ionic/issues/723

7

I was actually working on this yesterday. I opted to go with this solution.

I’m using a custom directive to get around the issue of angular not allowing expressions in <embed>:

angular.module('DOGE.Directives', []);

angular.module('DOGE.Directives').directive('embedSrc', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var current = element;
      scope.$watch(function() { return attrs.embedSrc; }, function () {
        var clone = element
                      .clone()
                      .attr('src', attrs.embedSrc);
        current.replaceWith(clone);
        current = clone;
      });
    }
  };
})

Then use this embed-src in <embed> in your partial. Like so:

<embed embed-src="https://www.youtube.com/v/{{variable}}?suggestedQuality=medium&hl=en_US&feature=player_embedded&version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always"></embed>

At least in a YouTube video on iOS this allows the play button to be clicked, and the video plays.

8

I just fixed this, thanks for letting us know! https://github.com/driftyco/ionic/issues/723

9

Oh, and spoiler alert on the BB video ;). Hilarious.

10

Thanks a lot, it’s works.

11

How do I get this fix? I do not see this change in the latest nightly builds…

12

What build are you using? You should be able to open either the js or css file and see what the comments say.

13

How can i play live stream (just like m3u8) video ?

14

Right now, I’m not too sure if it is possible, but you could check out these directives

15

I am having the same problem as the original poster, but with the <video> element rather than the <embed> element. If I put it outside the <ion-content></ion-content> it plays when clicked on my Android device, but move it inside and it won’t play when clicked.

Advice?

16

There’s some issues with <video>. Check this post for more info.

17

This is not work with android for me, please tell me what are changes required ?

18

You need to whitelist the URLs in your config.xml
// config.xml
<allow-navigation href="*://*.youtube.com/*" />
<allow-navigation href="*://*.vimeo.com/*" />