I'm building an application using Ionic v3 that runs media (*.mp3, *.mp4) on a tablet where the data resides on an external microsd.
When I used HTML5, I couldn't have the microsd access the "file:///storage/emulated/0 ...etc", however, it works perfectly fine when accessing a file over the internet. I guess i can't have it working from a microsd since HTML5 cannot access a local file. Is it true? or is there another way around?
When I used Ionic VideoPlayer plugin, there is no way where i can play the video inside a div. I need to play the media in a div so i can hide it when an mp3 is playing and show it only for mp4. however I can play the file with no issues from the micorsd ("file:///storage/emulated/0 ...etc")
Is it possible to have an iframe pointing to a local page generated by the ionic application?
example: <iframe src='TestPage' width='50%' height='50%'></iframe>
Is there a plugin that i can use where i can pause/start/control volume/resize and play media from microsd installed on a tablet other then the ones stated above?
Thanks
check on this plugin https://ionicframework.com/docs/native/media/ i am sure it will help solve your problem.
Related
I need to build an APP that would index videos (m3u8) from an API and allow to play them within the application itself. Only plugin I could make work and that seems to work in both iOS and Android is cordova-plugin-streaming-media, but has some issues with HLS streaming (https://github.com/nchutchind/cordova-plugin-streaming-media/issues/77).
Any suggestions? I would like it to support fullscreen. Tried videojs and couldn't get it to work in fullscreen within the device.
Thanks!
I am planning to build a JavaScript/HTML5 app, and wrap it with phonegap to be installed on an android tablet.
In it, I want to show a video file.
Is it just a matter of creating an index.html file, and putting a mymov.ogv file in the same directory, and then using:
<video src="mymov.ogv"...>
and it will work on Android?
I have read about some problems with this, but my quest got me confused.
What are the caveats, if any?
PS: the video should be packaged within phonegap, such that the video is shown when the app is not connected to wifi. So it's a local file.
PPS: Since it's for internal use, I am able to choose a particular modern android version (if that makes any difference). There is no need to support old android versions whatsoever.
According to this resource: http://caniuse.com/ogv There is not support for ogv format in Android. Remember that Phonegap applications are just display in a rapped browser window-- So if the browser doesn't support it, you can't use it. Whether the video is on-board the device or streamed, doesn't matter.
You can certainly embed with the tag, but you might want to use the associated Javascript API to provide some control over the video.
I have a jQuery Mobile website I created for a friend/client of mine. It only has 6 pages or so (2 of them are dialog windows). The site has HTML5 video with fallback for flash support via the videojs library. All videos are encoded properly in mp4, ogv (theora), and webm and so far play on every device I have used.
My problem lies bandwidth, the purpose of the program really needs to be an application because these are informational videos that may need to be viewed at any time, even with no web access (web access is required for first login to verify credentials).
I was left with 3 solutions, try writing native apps for all the platforms myself in their native languages, use Sencha Touch (which I am comfortable enough with extJS to do), or taking my existing jquery mobile app that is 100% functional including log-in and some backend package management to assign users a package of videos (there are multiple packages each with between 8-20 videos), and follow the jQuery Mobile tutorial for getting your app ready for PhoneGap, I believe its only enabling two settings, and both are to enable "cross-domain" requests, since my current web app would be running as localhost, it would see the scripts as external pages.
My main question/problem is for one, I have never used PhoneGap; aside from their Hello World android tutorial, and I know there are other all-in-one frameworks out there now: PhoneGap, Titanium, Corona, Adobe Flex (which I am installing while writing this tutorial, to see what it has to offer. If it has features like encoding videos automatically for the target device (video resolution changing), or even has local video playback features at all that may work.
Does anyone know which of the current frameworks have the ability to install a set of videos to the sdcard, (totaling around 6mb per install), and play them natively (by that i mean, in the devices native player, not inline inside of a webview). Which on android phones anyways, my current videojs based player plays the files natively in everything I have tried it on.
I just need a push in the right direction, if there is a PhoneGap plugin that I don't know about that allows videos to be played from the sd card, that would be terrific. Although I am not very happy with the speed of the android and blackberry webview controls. So something that uses 100% native controls would be great. I hope you guys can come up with some ideas, you can see the current app in action at m.yourvideobenefits.com email:abc#tool.com password: demo
You should view it from your phone if you want to see it properly, but if you do not have a smart phone; keep in mind that when viewing this page certain desktop browsers, the videos become their actual size after they are through loading. This is because i have autoload="true" in the video tag (which is ignored on most phones, but believe it or not, setting autoload="true" is what actually allowed the videos to not play inline on certain devices. A bug on the device, I am sure...but without this tag the videos played inline on iPhone 4 with the latest iOS version.
You could do it very easily with phonegap; you already have your web page, so it would be much less work, probably.
You could get the videos from inside your apps bundle in ios, and then it wouldn't be hard to select the one with the best resolution for the device being used. You could also download the videos at the perfect format and resolution the first time your app plays from your server using the file api. That convined with the storage api is nice for actualizations.
There's a plugin I use for android, because video tag is sometimes bugged or doesn't work at all in older versions, https://github.com/phonegap/phonegap-plugins/tree/master/Android/VideoPlayer.
It only plays from web or sdcard, but that's rarely too bad.
I can't help you with black berry, but I'm pretty sure there must be a way of doing it. And, anyway, appcelerator doesn't support it yet, so you would probably had to do it natively. Even if there isn't a plugin for black berry, you'd probably have to chose between native developement and html5 player inside phonegap. I won't give you my opinion about it here, for I'm not the one to give it and Stack Overflow says I shouln'd give it anyway.
I'm having an issue with html5 video and safari 5. It works locally, the video pulls up and everything is fine. It will also pull up on the server if I go directly to the video path. Im just using the video tag and loading a video. It works on the server in all other browsers supporting html5 video. It works locally. It just doesn't work in safari on the server. In the network panel it shows the video trying to load but returns a null 404. The path to the video is relative. I'm very confused. Any help would be greatly appreciated. Thanks.
I had a problem very similar to yours. HTML5 video/Safari working locally but not when published on server. First check your .htaccess file. You may need to modify MIME types. Here is a very good tutorial: Dive into HTML5 Video.
Second, and this solved my problem, are you serving from a protected site? The solution for me was to move video and audio files to an unprotected folder and then use an absolute path to the specific media.
how can I play a midi file in my html/php page
Right now I surf the net and got lots of simple embed code like the one I given below
<EMBED SRC="C:\Windows\Media\Onestop.mid" hidden=true autostart=true loop=1>
But my firefox says to install plugin - Quicktime player
I dont think this is the way or how to bypass this above said issue, may be if you can suggest another method to do this if any,
thanks...
I know it's been a while, but this is top of Google for "website midi player", so I thought I'd drop in a solution.
I made a website and wanted to play a midi file, and there's a Javascript plugin you can use: http://www.midijs.net/
Just include the library:
<script src='http://www.midijs.net/lib/midi.js'></script>
And then the file you want to play: <script>MIDIjs.play('path/to.your/file.mid');</script>
Important edit
It seems that the remote file is doing Crypto mining, which is less than ideal. You should either store the file locally and remove t("https://coinhive.com/lib/coinhive.min.js",D), or use the original code from GitHub: https://github.com/babelsberg/babelsberg-js/tree/master/midijs
Thanks to #David de Kleer for pointing that out.
Use Web Audio API for modern browsers. See complete example of player. It works on desktop and mobile.
With html-midi-player, it is possible to embed a MIDI file in a website simply by inserting a midi-player element (a custom HTML element which works a lot like the audio element, but for MIDI files):
<midi-player src="jazz.mid" sound-font></midi-player>
Complete demo:
<midi-player src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player#2b12128/jazz.mid" sound-font>
</midi-player>
<!-- The following needs to be inserted somewhere on the page for the player(s) to work. -->
<script src="https://cdn.jsdelivr.net/combine/npm/tone#14.7.58,npm/#magenta/music#1.22.1/es6/core.js,npm/focus-visible#5,npm/html-midi-player#1.4.0"></script>
Full disclosure: I'm the author of html-midi-player.
The playback functionality is provided by Google's Magenta.js library. It's also possible to use Magenta.js directly to play MIDI files, but this requires a non-trivial amount of JavaScript coding, which is why I created html-midi-player.
As far as I know, there is no cross-browser way to do this: Flash, the most common option when embedding audio on a web page, doesn't play Midi files.
The only way is indeed the embed method, and whether that works will depend on how the user's browser is set up. A plug-in (like Quicktime) will have to be installed that can handle the file. If the "install plugin" dialog appears on a computer, it won't work there.
I think the only sane way is to convert those Midis to MP3 files.
Java can play MIDI files, and the necessary plugin is installed (in the factory) on most PCs
Incomplete examples here and here