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:
<video #myVideo id="myVideo" width="100%" autoplay="true" controls>
<source [src]="videoURL" type="video/mp4"/>
</video>
or the alternative
<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
Do you control the format of the videos and how they are encoded, or are these videos generated by the users of the app?
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.
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.
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.
Oh I see the controls. It just never seems to load the src I specified. What does your code look like?
Then you’re constructing your source incorrectly. The code you have posted looks fine, except for the use of autoplay.
Ok, removed the autoplay entireliy but still no cigar.
Which variation of the code do you use?
[src]=“videoURL” or src="{{videoURL}}"?
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.
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/
Much more user-friendly! 
Hay @loki9182 is it working fine with mobile devices?
is this possible when i touch video than its play??