Since the release of iOS9, we can render local HTML with a wkWebView using loadFileURL:allowingReadAccessToURL:
This looks good so far, but we are having problems playing a local mp3 from within the HTML.
There is an <audio> tag with a src attribute with a relative path to the mp3 file.
The iOS9-Simulator plays our mp3 correctly, but physical devices don't. Catching the error with JavaScript shows a networkState NETWORK_NO_SOURCE, which does not make sense to us...
Using an http URL as src and streaming the mp3 from the web works fine.
Has anybody managed to play local audio files with a wkWebView?
I also encountered this issue on iOS 9.2. A video with a local URL would play fine on the simulator but not on device. Debugging using Safari tools showed the video error to the the same No source error. We filed a radar for it: http://www.openradar.me/24281444
Here is the crazy part - one kludgy workaround that worked (without having to run a local web host) was that we found if you played a video first in a UIWebView then the wkwebview videos would work. We took this a step further and used a UIWebview that was hidden to play a half second video with no sound that had an autoplay attribute in the tag and the web view had
uiWebView.mediaPlaybackRequiresUserAction = false
While hacky as anything I have seen it causes the WKWebview to then play videos fine. So one more solution until they fix the issue.
It seems that code inside a WKWebView cannot access local files. I am not aware if this is intended behaviour or a bug (radar, anyone?)
Before loadFileURL:allowingReadAccessToURL: was introduced in iOS 9, there was a workaround to load a local HTML file by copying it to tmp/www.
Surprisingly, files there can then be access from inside the WKWebView – including media files.
Pretty easy fix actually you just need to prefix the src URL with localhost and your WKWebview port (default 12344).
Turn A into B:
<!-- A -->
<audio src="img/beep.mp3" controls></audio>
<!-- B -->
<audio src="http://localhost:12344/img/beep.mp3" controls></audio>
Related
I wrote a vscode extension that creates a webview panel and I'd like to play an audio buffer when the user clicks a button on my page. I have this identical code working in a test page in a browser so I think I'm doing the webaudio part correctly.
I initialized with vscode.window.createWebviewPanel(...).
When I click the button on the page, it looks like the code is working (there are no errors thrown and the expected code path happens) but I don't hear any sound.
Is there something muting the sound in the webview? Is there something I have to do to tell vscode that sound is expected?
Or is it just impossible to make a sound in a vscode extension?
EDIT:
One more detail that I forgot to mention. I am creating the audio buffer in javascript but I am loading a number of small .mp3 files that I'm using as source. So it requires XHR to receive the .mp3 file and decodeAudioData to decode it.
From my experience, Web Audio API works fine in a VS Code webview panel, but its support for audio file types is very limited. It can’t decode .mp3 files or even .wav files.
However, an .oga file (Vorbis-encoded OGG) works.
I'm having trouble getting chrome to play the audio files on this website: http://pyramids-tapes.com/
I'm using this plugin, whose demo is working in chrome: http://tympanus.net/codrops/2012/07/12/old-school-cassette-player-with-html5-audio/
From looking at my network tab, I'm seeing that the server is returning a 206 partial content status for the mp3 file, but I'm not sure what is causing this, visiting the file directly in the browser plays the file fine (http://pyramids-tapes.com/songs/never_satisfied.mp3).
Can anyone help me with this?
I'm creating an application in phonegap on android 2.3.5.
I have a YouTube video in my app which I want to display in a similar way it displays on a browser (namely inside the browser window), however clicking the video image invoke an external video player that takes over the screen.
Is there a way to play the video inside a window in my app without it taking over the screen (the same way it displays on a web browser)?
Thank you.
To install the plugin, move www/video.js to your project's www folder and include a reference to it in your html file after phonegap.{ver}.js.
Create a directory within your project called "src/com/phonegap/plugins/video" and copy "src/com/phonegap/plugins/video/VideoPlayer.java" into it.
In your res/xml/plugins.xml file add the following line:
Once installed you will be able to play a video by calling:
window.plugins.videoPlayer.play(url);
The url parameter can be one of three types:
The file:// protocol to play something native to the device such as:
window.plugins.videoPlayer.play("file:///sdcard/MyMovie.mp4");
The http:// protocol to play something on the internet such as:
window.plugins.videoPlayer.play("http://path.to.my/file.mp4");
The http:// protocol pointing to a video on YouTube such as:
window.plugins.videoPlayer.play("http://www.youtube.com/watch?v=E0UV5i5jY50");
As long as your url has "youtube.com" and contains the video ID (i.e. the v parameter) the VideoPlayer should be able to start the YouTube app on your phone to play the video without any additional user interaction. However, if the phone does not have the YouTube app you are out of luck. In the future I may add a check for this that will ask the user to install the YouTube app first.
Sadly at this point in time the VideoPlayer does not support playing videos from your android asset directory. That is an enhancement for a later date.
So, there you go a pretty simple and easy to use plugin which can get you unstuck if you really need to play a video in your Android PhoneGap application.
I'm trying to implement HTML5 Video in a site and for that I'm using VideoJS, so far it works great in Firefox and Chrome but my problem comes when I try to play the video with IE9. The player would load and when I click on the Play button, the loading image would appear and it would get stuck without doing anything.
I've checked other websites and they suggest that the MIME Type that the server is sending is wrong but I've checked already that and it's not the case.
Any ideas?
Have you checked to make sure you are mp4 file is using the H.264 compression scheme?
Your issue is common, and the above answer barely scratches the surface.
MP4 files neet to have their indexes written ahead of the video data within the file. IE isn't freezing, it's actually downloading your video all at once. You can inspect this from your console.
The fix is very simple. Download the AIR application QTIndexSwapper2, and run your MP4 files through it. Reload those files to your server and they will seamlessly stream through the VideoJS SWF Player.
Make sure you have controls and autplay
I have an application which embeds a browser based on Xulrunner inside it. I have couple of flash swf files I need to load in the browser. The swf files talk with a JavaScript to change the page title and also to change the URL when I am browsing through the content in the URL. I need the URL change because I need to remember where I was in the flash content so that I can go directly to that place in the flash file when I open my browser the next time.
To let the swf file do this I created a cfg file and placed it into the Flash Player Trust folder( I tried both the local one at /home/user/.macromedia/Flash_Player/#Security/FlasPlayerTrust and global trust file location at /etc/adobe/FlashPlayerTrust ) , but I didn't get the expected result. I debugged into my app and found that the swf never reset the Title of the page( which indicates that the JavaScript was blocked) . It works fine from a firefox browser but not from inside my embedded browser. My app also works fine on windows and Mac . This is observed only on Linux. Can any body think of what else I need to do get my javascript embedded in the flash file working?
Don't use flash app dependencies inside embedded browsers inside desktop applications.