# Controlling Video and events

**URL:** <https://forum.ionicframework.com/t/controlling-video-and-events/93349>\
**Category:** ionic-v3\
**Created:** [June 7, 2017, 2:52pm UTC](https://forum.ionicframework.com/t/controlling-video-and-events/93349 "2017-06-07T14:52:06Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![loki9182](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/loki9182/32/103293_2.png) [@loki9182](https://forum.ionicframework.com/u/loki9182)\
**Post date:** [June 7, 2017, 2:52pm UTC](https://forum.ionicframework.com/t/controlling-video-and-events/93349/1 "2017-06-07T14:52:06Z")

</div>

Does anyone have recommendations on good practices for playing video in an Ionic app? I’m using the latest version of Ionic and I’ll be loading multiple videos from an external server but I’m having problems with a few things:

Setting the src of the video dynamically, I’ve tried both options:

```auto
  <video #myVideo id="myVideo" width="100%" autoplay="true" controls>
    <source [src]="videoURL" type="video/mp4"/>
  </video>

```

or the alternative

```auto
  <video #myVideo id="myVideo" width="100%" autoplay="true" controls>
    <source src="{{videoURL}}"/>
  </video>

```

In both cases, the video does not start. I need this to work for Android and iOS. I also need to be able to play/pause the videos from JS functions, not just auto-play them. I’ll also be loading the videos in an \*ngFor loop so I need to be able to connect to each separately.

Any recommendations?

Cordova CLI: 6.3.1  
Ionic Framework Version: 3.2.1  
Ionic CLI Version: 2.2.1  
Ionic App Lib Version: 2.2.0  
Ionic App Scripts Version: 1.3.7  
ios-deploy version: Not installed  
ios-sim version: Not installed  
OS: Windows 10  
Node Version: v6.10.3  
Xcode version: Not installed

---

<div class="post-metadata">

**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\
**Post date:** [June 7, 2017, 4:28pm UTC](https://forum.ionicframework.com/t/controlling-video-and-events/93349/2 "2017-06-07T16:28:19Z")

</div>

Do you control the format of the videos and how they are encoded, or are these videos generated by the users of the app?

---

<div class="post-metadata">

**Author:** ![loki9182](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/loki9182/32/103293_2.png) [@loki9182](https://forum.ionicframework.com/u/loki9182)\
**Post date:** [June 7, 2017, 4:54pm UTC](https://forum.ionicframework.com/t/controlling-video-and-events/93349/3 "2017-06-07T16:54:38Z")

</div>

Fully controlled as MP4.

---

<div class="post-metadata">

**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\
**Post date:** [June 7, 2017, 5:01pm UTC](https://forum.ionicframework.com/t/controlling-video-and-events/93349/4 "2017-06-07T17:01:10Z")

</div>

Is your issue autoplay? Mobile devices often disable that. Or is it something else?

Edited to add: For example, as of iOS10, only videos with no sound can autoplay.

---

<div class="post-metadata">

**Author:** ![loki9182](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/loki9182/32/103293_2.png) [@loki9182](https://forum.ionicframework.com/u/loki9182)\
**Post date:** [June 7, 2017, 7:10pm UTC](https://forum.ionicframework.com/t/controlling-video-and-events/93349/5 "2017-06-07T19:10:09Z")

</div>

No, I can’t get it to play even when running in the browser. Currently looking at Videogular to see if it would fit my needs.

---

<div class="post-metadata">

**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\
**Post date:** [June 7, 2017, 7:16pm UTC](https://forum.ionicframework.com/t/controlling-video-and-events/93349/6 "2017-06-07T19:16:01Z")

</div>

You can’t even see the controls? I find that hard to believe, unless there is relevant code you haven’t posted. The code I use looks similar to yours, and it works fine on both browser and device. But you should remove the autoplay directive, no matter what. It will create unpredictable behavior across platforms.

---

<div class="post-metadata">

**Author:** ![loki9182](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/loki9182/32/103293_2.png) [@loki9182](https://forum.ionicframework.com/u/loki9182)\
**Post date:** [June 7, 2017, 7:19pm UTC](https://forum.ionicframework.com/t/controlling-video-and-events/93349/7 "2017-06-07T19:19:17Z")

</div>

Oh I see the controls. It just never seems to load the src I specified. What does your code look like?

---

<div class="post-metadata">

**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\
**Post date:** [June 7, 2017, 7:21pm UTC](https://forum.ionicframework.com/t/controlling-video-and-events/93349/8 "2017-06-07T19:21:27Z")

</div>

Then you’re constructing your source incorrectly. The code you have posted looks fine, except for the use of autoplay.

---

<div class="post-metadata">

**Author:** ![loki9182](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/loki9182/32/103293_2.png) [@loki9182](https://forum.ionicframework.com/u/loki9182)\
**Post date:** [June 7, 2017, 7:29pm UTC](https://forum.ionicframework.com/t/controlling-video-and-events/93349/9 "2017-06-07T19:29:26Z")

</div>

Ok, removed the autoplay entireliy but still no cigar.  
Which variation of the code do you use?  
[src]=“videoURL” or src="{{videoURL}}"?

---

<div class="post-metadata">

**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\
**Post date:** [June 7, 2017, 7:30pm UTC](https://forum.ionicframework.com/t/controlling-video-and-events/93349/10 "2017-06-07T19:30:24Z")

</div>

They both work. Your problem almost certainly lies in an incorrect value in videoURL. You haven’t posted any error, console output, or said anything about what “doesn’t play” actually means. So I don’t believe you have closely analyzed the problem. If you do that, you’ll find the solution. This doesn’t seem like an issue with Ionic at all.

---

<div class="post-metadata">

**Author:** ![loki9182](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/loki9182/32/103293_2.png) [@loki9182](https://forum.ionicframework.com/u/loki9182)\
**Post date:** [June 8, 2017, 3:06pm UTC](https://forum.ionicframework.com/t/controlling-video-and-events/93349/11 "2017-06-08T15:06:08Z")

</div>

I gave up on using the basic tag and decided to go for a wrapper which offer much more control. For those looking for a good solution, try using Videogular: [https://videogular.github.io/videogular2/getting-started/](https://videogular.github.io/videogular2/getting-started/)  
Much more user-friendly! 🙂

---

<div class="post-metadata">

**Author:** ![bhavin\_webdesk](https://avatars.discourse-cdn.com/v4/letter/b/858c86/32.png) [@bhavin\_webdesk](https://forum.ionicframework.com/u/bhavin_webdesk)\
**Post date:** [July 11, 2017, 2:29pm UTC](https://forum.ionicframework.com/t/controlling-video-and-events/93349/12 "2017-07-11T14:29:14Z")

</div>

Hay @loki9182 is it working fine with mobile devices?

---

<div class="post-metadata">

**Author:** ![ravi-sookshum](https://avatars.discourse-cdn.com/v4/letter/r/ec9cab/32.png) [@ravi-sookshum](https://forum.ionicframework.com/u/ravi-sookshum)\
**Post date:** [November 30, 2017, 9:16am UTC](https://forum.ionicframework.com/t/controlling-video-and-events/93349/13 "2017-11-30T09:16:54Z")

</div>

is this possible when i touch video than its play??
