I am creating a URL stream music player in web with JavaScript. Everything is working fine in android device. While in iPhone devices DOM rendering is getting blocked. I have adjusted all JS position in HTML file but still it is not working. For demo please check here
I have resolved this issue by setting src value by Javascript. Earlier I have provided a default stream URL in HTML file which causes this issue.
Related
I am replacing a div in PhoneGap android application.
Both below codes work in browser, but code 01 not working in the device.
Code 01 (Not Working Code)
var selected_floor = $('#select_floor').find(":selected").val();
$("#image_area").html('<img class="img-responsive" src="images//2000.jpg">');
Code 02 (The Working Code)
var selected_floor = $('#select_floor').find(":selected").val();
$("#image_area").html('Hello World');
Why Code 01 not working in the device? How I solve it?
Additional question :If I getting this type of question (working on browser, but not working on the device) how should I debug it on the device to know whats going on?
Update
Carsten Løvbo Andersen suggested to add the ALT tag to image. So I add the ALT images. Now in device it display the value of ALT tag instead of the image. But in browser it display the image.
To debug on a device get yourself an android device, personally I use a HTC M8, this allows you to USB into your PC and by using the chrome browser and using the URL chrome://Inspect you can view the html and scripts of the application, like you are using debug tools on chrome.
*EDIT
I am not 100% clear on the issue you are facing but remember the routing on a device can sometimes differ, make sure that your image path is correct.
For example to get my images working on my latest application i needed to use
<img src"~/Content/images/image1.png">
Try adding the ~/ followed by the directory.
I want to set up v3 of Ooayla's api and use html 5 videos. So far I've followed the instructions here and I've added to the players js script to include the parameters to force html video. The video won't show on chrome for android 4.4 and on desktop it reverts to flash. If I say html only then it doesn't show up at all on either devices.
Here's my header code
<script src='https://player.ooyala.com/v3/MWI3YjYwYTBiZjg1ZWE0ZTYyZWViM2Ew?platform=html5-priority'></script>
My javascript code
//topVideo.field_ooyala_upload is the variable for the video id.
OO.ready(function() {
window.player = OO.Player.create(
'playerwrapper',
topVideo.field_ooyala_upload, {
// add the embedded player parameters here
autoplay: false
}
);
});
Not sure why I can't get HTML5 videos to show up. Any help would be great.
To stream using HTML5 V3 Player you have to add the ULR query param as you have done correctly.
Note that this will stream using progressive download on both desktop and Android and as such this encoding must be enabled in your account.
If you want to try HLS streaming, and have that encoding enabled, for Android you have to enable an additional query string parameter described here.
If you have a more complete sample of your code, please share it for further comments.
I was testing a script which works fine on almost all desktop browsers and Android's chrome browser but when I tested it on Android version of Firefox Mobile browser I'm got wrong viewport dimensions.
So I decided to put together a small script to log the viewport dimensions at three stages [init (before load), after load and after a 1 second timeout]
http://kraftpixel.in/test/viewport.html
This is what I receive on my Moto-E android phone.
Also I noticed 'Dimensions after load' are random, On one occasion I noticed w=980 h=480 after load but presently I get the following result.
Initial dimensions : w=980 h=480
Dimensions after load : w=360 h=519
1 Sec after load via setTimeout() : w=360 h=519
Can someone please test this behavior on their android phone using the Firefox Mobile browser?
Suggestions are welcome but I need to execute the script before onLoad.
Its a script similar to those '(Pre)loading screens' on some websites.
I had the same problem that you and after some research I found that to have those properties correctly initialized you should wait until DOMContentLoaded is fired.
Try to modify your script using that event instead of onload and you will have the same result that when you fire the log function one second after load.
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
i am developing a java web application which will be browsed using iPad safari through 3G\VPN connection, i have an IFRAME its SRC is a url to a servlet that sends a pdf file to the IFRAM
<iframe src="documentviewer?docid=#{viewIncomingBean.incoming.id}" width="610px" height="5000px"></iframe>
problems with IFRAM on iPad Safari are:
1 -after calculating the time taken on server side to flush the pdf file in the output stream to the client i found that the IFRAME takes a very long time to getting rendered and the pdf file loaded on client side (please have a look Using Iframes Sparingly).
2 - on iPad Safari the IFRAME can't be scrolled using regular one finger touch style, you must use two fingers to scroll the IFRAME up and down (please have a look ipad and iframe problem).
is there is any other better way to load the pdf file in a web page ????
I had to develop a pdf viewer for an ipad site we were working on. We could not make the scroll work with other thing but the two fingers.
What we did was to use http://mozilla.github.com/pdf.js
it is a javascript renderer for pdf documents. It works great ... of course, if you dont use IE.
another solution is to use the document reader of google ... https://docs.google.com/viewer
I've successfully integrated Flowplayer into my Drupal installation using the video and flowplayer. I upgraded flowplayer files to the latest release 3.2.7 and all works ok, but not on iPad - iPod Touch.
I loaded the js for the iPad plugin in the Flowplayer module like this:
drupal_add_js(drupal_get_path('module', 'flowplayer') . '/flowplayer/example/flowplayer.ipad-3.2.2.js');
and I see that it is loaded fine.
then in Flowplayer js I had this line
$(selector + ':not(.flowplayer-processed)').addClass('flowplayer-processed').flowplayer(settings.basePath + settings.flowplayerSwf, config);
I changed this in this way:
//I added the first line because in the example it worked that way
$(selector + ':not(.flowplayer-processed)').attr('url', config.clip.url);
$(selector + ':not(.flowplayer-processed)').addClass('flowplayer-processed').flowplayer(settings.basePath + settings.flowplayerSwf, config);
//then i add ipad support (the selctor is hardcoded to maike things work)
$f('flowplayer-video').ipad();
In this way, on my iPod touch (I think it's the same on iPad) I see the player but the video doesn't start (there is some kind of blocked overlay).
You can look at the site here
EDIT - now i got it working thanks to teddy suggestion. now i'll try to find out how to setup my script so that it returns byte-range headers.
If anyone knows how to do this, please post here.
The server that serves the actual MP4 video to the iPad must support the HTTP header called byte-range.
I would try using an alternate video source from another server, as a proof-of-concept to see if this is the cause of the problem.
Here is an MP4 video served with the byte-range header: http://mediaelementjs.com/media/echo-hereweare.mp4