I open a website URL in Android WebView inside an application. One of the web pages contains links to Images and Audio files on server. Server in response reads the file requested and writes the content to Response stream and sets appropriate Content-Type. The images is opening perfectly but audio is not playing, it just flashes a window with the URL and just goes away immediately. I am using Java Script window.open() for this purpose.
When I access the website directly in Android browser, its playing the sound by opening native music player application. I am wondering why the same is not working inside WebView.
Do anybody have idea about such kind of problem? If you have further query on the same, I will provide. Please share your experience.
Thanks!
This is a bug inside the webview. you can use video tag replaced to audio tag as an example:
<video width="320" height="240" controls>
<source src="audio.mp3" type="video/mp4">
</video>
Related
We have Android device. Inside that device, on internal flash is located Download folder and inside that folder resides cat.mp4
Currently we are using following script:
<video width="365" height="200" autoplay loop controls autobuffer>
<source src="file:///sdcard/Download/cat.mp4" type='video/mp4'>
</video>
We have also tried following script:
<video width="365" height="200" src="file:///sdcard/Download/cat.mp4" autoplay loop controls autobuffer>
</video>
Both scripts do not play local video file.
The html file itself, which contains above video tags, comes from certain remote location (not local).
(If we place cat.mp4 on remote location it plays without any problem)
Is this correct approach to play local mp4 files in WebView?
If not, which part of the code is incorrect?
Is this correct approach to play local mp4 files in WebView?
Nope you can't do that in general (webView or not). Security measures (in HTML protocols) do not allow a web-based application to access a user's files from their hard drive (or other storage).
The user must allow access by selecting the file themselves (hence the browse/select file option in some websites). Only options are:
Put HTML and video files online (load everything from web)
Put HTML in SD card's download folder then you can use src="cat.mp4"
A side issue with your approach begs the question, what happens for site visitors without these files on SD card? Or worse a user not even using Android (on a Win PC how can my browser make sense of src="file:///sdcard/Download/cat.mp4" ?)
I have the following video HTML:
<video id="player_a" class="video-js" controls preload="auto" title="Home video" width="640" poster="~/Assets/img/video_poster_full.jpg" data-setup="{}">
<source src="https://#####.blob.core.windows.net/video/homepage-video.mp4" type="video/mp4">
<source src="https://#####.blob.core.windows.net/video/homepage-video.webm" type="video/webm">
<source src="https://#####.blob.core.windows.net/video/homepage-video.ogv" type="video/ogg" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
On Android, this video does not play from the webpage. But as soon as I change my video host from the Azure Blob to my own private server (http://myserver.net/images/homepage-video.mp4), it streams fine.
I notice that if I just go directly to the URL of the .mp4, it does not load from Blob (but does from my private server). I also notice that the .webm does load okay from Blob but for some reason, my video is not falling back to that format.
Are there any settings I need to change in Azure Blob to allow .mp4 to be streamed differently? Or what am I doing wrong that is not causing the video to fall back to .webm?
The permissions on your blob will need to be public to make sure that you can access the content without a key. You can check this in the properties of the container.
In the documentation you can find an excellent post on how to set these permissions up.
I am working on a mobile app, using Ionic framework and I want to play video in a mobile app. I have a list of video's and I am using video tag for playing the video.
ng-src with full path works fine.
But following block of code doesn't work. I have a list of video's and i can't use hardcoded data, I am allowing user to select the video.
<video controls>
<source ng-src="{{src}}">
How can I resolve above problem or any alternate method for the same.
I solved the issue. URL loading was blocked.
I fixed it using $sce service
ng-src="{{trustSrc(videos.link)}}"
Do audio tag works on an android native app?
I've been searching a while now, but I can't find a post that tells me if it is supported or not, or what do I have to do to make it work.
<audio id="Multimedia1" controls="controls" width="100%" height="30px">
<source src="file:///android_asset/www/Resources/audio.mp3">
Your browser does not support audio.
</audio>
It doesn't load the audio.
I've tried different paths, such as:
Resources/audio.mp3
www/Resources/audio.mp3
file:///android_asset/www/Resources/audio.mp3
If I browse the index.html with the browser (no native app), the audio plays fine with a relative path.
But I just can't make it work it with an apache cordova app.
Any ideas?
Thanks in advance!
I had the same issue with audio tags from HTML5 in Cordova 2.3.0. What I ended up doing was to just play them using JavaScript:
Here's the audio.js I put in the js folder:
function playAudio(src) {
src = '/android_asset/www/' + src;
var media = new Media(src, success, errorThrown);
media.play();
}
function success() {}
function errorThrown(e) {
alert('Error while playing the sound!');
}
And then in your HTML code you do:
<script src="js/audio.js"></script>
And to play the sound add this in a <script> block:
playAudio("media/your_sound.wav");
Same problem: I found the issue is that in order to be able to use the .play() function in HTML5 audio it must run within an user interface event handler (e.g. click) as detailed here:
https://code.google.com/p/chromium/issues/detail?id=178297
This is common policy in mobile browsers to attempt to avoid sites that would autoplay stuff and burn through data it seems. One can use this https://gist.github.com/blairvanderhoof/9380545 to set the webview used by the app to get around this. I am working on making a plugin that when installed will change this behaviour.
-Mike
I am launching the MediaPlayer to play a .mov file that is being passed into the MediaPlayer as a Uri (which is standard). However, it is telling me that it cannot play the file. However, if I put this same link on the web, and the click the link to launch the movie (while in my Android browser) the video plays no problem. However, I can't get the WebView to play it with the Video tag despite all my efforts.
So here is my question, what magic is taking place that allows an android browser app to take a .html url which contains a link to play a video and play it? If I load the same url in a WebView, or try to pass the video url into the mediaplayer, it is a no go. The format of the video is .mov.
Thanks in advance to everyone.
The Android browser and WebView are very different, WebView is very barebones as it was designed expecting people to use it for very basic showing html webpages. WebView by default has no plugins enabled, no javascript enabled and so on and so on. Never expect that because something works in the browser that it will work in a WebView.
Now in regards to how the media is handled. The Browser has extra features set up to strip the video source from the page and launch it in the native player most of the time. This functionality is not built into WebView. And the native player is very picky about what needs to passed into it as a URI to be able to play it.
Hope that helps,
Stevy888