I have a very basic project (the vanilla cordova project with the html added):
<video src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" autoplay loop></video>
But I can't get this to work. This is what I see, a cancelled play icon:
How can I get this to work properly? If I want to use a locally referenced file, is this possible? Also can it play in the <video> box and not full screen?
Do you have whitelisted the video's domain?
Cordova has a security model that blocks, by default, every external resource request. You can allow this domain adding:
<access origin="http://download.blender.org/" />
to your config.xml file.
Related
We experience an issue with playing a mp4 file on ipad on webpage with a video HTML 5 player.
Issue:
It does not work on ipad/iphone. On all other platforms (Windows,Android, iOS desktop) it works fine.
This is the code:
<video id="my-video" width="400" height="240" preload="true" controls >
<source src="/media/video/6d9ab49-9936-4194-acvb-3cd9b60521fg/myvideo.mp4" />
</video>
Connected the ipad to the Mac to debug:
A message 'requested resource cannot be found'.
Does sound very clear but does not make sense because the mp4 file is accessible when you paste the url into the browser address bar.
Already tested and checked:
set src of mp4 to fullpath (including https:// or http://) instead of
using the virtual path ;
checked hostingprovider for 'Accept-Ranges: bytes' (with partial content (206) responses) ; settings are ok
play the same mp4 file from a remote url (accessed with or without https); strange but imporant : that works !
So I guess the issue really is that the mp4 can not be found or loaded on ipad.
But why?
Hope someone can help.
Have you tried it like this, include src directly inside <video> tag?
<video id="my-video" src="/media/video/6d9ab49-9936-4194-acvb-3cd9b60521fg/myvideo.mp4" width="400" height="240" preload="true" controls></video>
If it still doesn't work try to use only video element with src, remove preload and controls. Just to see if you can get it to work. And if still no results, try to go for absolute src path.
I had this very same problem serving videos on my Liferay Portal, which works perfectly on PC and Android, but not on iOS devices. After numerous tests, I think I've finally managed to nail down the cause.
For some reason, if the video file (eg MP4) is accessible by a guest user (ie accessible without having to log on to the server), then it will work fine on iOS. However, if the file is only accessible to logged on users, it won't work.
My theory on why this happens is that iOS is probably using a different session to do the range request check than the one used to play the video file. Thus, the range request check fails because the file is inaccessible.
How can I get a YouTube video to play inline in an Ionic/Cordova/PhoneGap app on iPhone? I've tried all the top results on here and Google to no avail. Whether I embed with an iframe, an object, or via the YouTube iframe api, the video always opens in full screen.
There are lots of iOS apps which achieve this. How are they achieving this? And can this somehow be hijacked and implemented into a Cordova app? Via a Cordova plugin, for example?
I finally got this working.
First, insert the YouTube video like so:
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XL9528Gohe0?autohide=1&playsinline=1&showinfo=0" frameborder="0" allowfullscreen=""></iframe>
Next, close down Xcode and edit config.xml (usually in the root of your project).
Add this line under the other preferences:
<preference name="AllowInlineMediaPlayback" value="true" />
Save it, rebuild the project, open in Xcode and run again. Your YouTube video should now be playing inline. Tested on latest iOS (9.1) on iPhone 6.
As #Zhou Hao added in a comment, you also need
<allow-navigation href="*://*.youtube.com/*" />
Without it, it was working fine in Android, but nothing was displayed in iOS (the content of the iframe was <html><body></body></html>).
After adding it, it worked fine on iOS also.
This is with Cordova iOS 4.2.0.
Use should useplaysinline as player parameter according to the documentation. youtube API
I embedded a video in my Ionic app which has a source file on my Rails application, so basically I have this
<video width="320" height="240" controls="">
<source src="http://localhost:3000/uploads/video/video/6/mov_bbb.mp4" type="video/mp4">
</video>
running on this url: http://localhost:8100/#/tab/videos/8
I think it has something to do with the same origin policy, so I've already tried to disable CORS on my Chrome browser starting it with this command: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security as well as installing and activating this Chrome plugin, too: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi.
It also doesn't work from any other browser which I have installed (Safari and FireFox).
Yet, the video file will not load (the video element will just stay empty, also there is no message about a resource failed to load in my console). How can I make the video load on my localhost:8100 while the video is being served from localhost:3000?
It turned out it wasn't a CORS or server issue at all. Obviously, when working with Ionic, you need to kinda accept that your well known world of HTML has an overlay at the most obscure locations. The issue was that Ionic requires you to use the angular.js src attribute ng-src="path/to/your/file", making the following work:
<video width="320" height="240" controls="">
<source ng-src="http://localhost:3000/uploads/video/video/6/mov_bbb.mp4" type="video/mp4">
</video>
I have a cordova app that was using media plugin for audio playback, but then it got broken with iOS8, because of this bug. I thought I will just use HTML5 audio (concretely audio5.js) as a workaround. Everything works nice in the simulator but when tested on the iPad, there is no sound. There is also no error reported it just looks as the sound is turned off.
For the testing I made cordova app with just plain example from the audio5.js github repository and I also tried with examples from two similar libraries audio.js and sound.js.
The result is the same, examples work in simulator and also from the web on mobile Safari on the device, but on the device inside cordova there is no sound.
I also included this two lines in the config.xml file
<preference name="AllowInlineMediaPlayback" value="true"/>
<preference name="MediaPlaybackRequiresUserAction" value="false"/>
without success.
I'm using cordova cli version: 3.6.3-0.2.13
EDIT:
It seems that iOS update 8.1.2 resolved original problem bug, so I recomend using Media plugin for audio on iOS .
I managed to get sound on the device with WKWebView which is at the moment not yet available in core cordova because there are some bugs. A workaround is a WKWebView plugin that is described by DevGirl here.
Using WKWebView created a problem for audio5.js when playing multiple sounds one after another where next sound is triggered by play "ended" of previous sound. I couldn't fix the issue, so I decided to try soundmanager2.js which worked with out the problem.
I still have a problem with playing sounds which are not inside www directory (sounds are downloaded to the device and are not included with the app), but this is I think another issue not related to the this question.
I'm developing a hybrid application for iOS using Dojo 1.9.1 as a JavaScript framework.
I'd like to play a video inside my app. The video is displayed into the dojo view (stopped) but I cannot play it.
I have also tried using HTML5 video tag... but still not working.
This is my code:
<video data-dojo-type="dojox/mobile/Video" controls>
<source src="images/movie.mp4" type="video/mp4">
</video>
I have tested the following in Worklight 6.1.0 with an iPad running iOS 7.0.x:
Created a new Worklight project and application and chose to add the Dojo Library via the wizard
Added the iPad environment
Added a video folder next to the JS and CSS folders in common, and placed in it a .mp4 file
Used the following in index.html: http://pastebin.com/dJPJGRU2
In common\main.js I've added dojox/mobile/Video to the dojoInit() function's require
Unchecked the "Provide Library Resources" option in the Dojo console in Eclipse
Running in both iOS Simulator and device, I could tap the play button to play the video.