Can't play embed video in


#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?


Can't play HTML5 video content on Android
#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/*" />