I am working on a web application and I have one compatibility problem with Apple devices & Safari on PCs.
Html5 audio tag:
<audio controls>
<source src="/audio/en/file.mp3" type="audio/mpeg">
<source src="/audio/en/file.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
I just want to play an audio file with basic controls.
The previous code works perfectly on Chrome, Opera, Firefox (Windows & Android devices).
But controlers do no appear with Safari (tested with the latest version on PC, iPad & iPad mini).
Audio player have a grey background with only "play/pause" function.
Here is a screenshot that describes my problem :
Thanks.
I had exactly the same problem.
My solution: I added the full URL for the audiofile source. Don't know why but it makes a difference. Here's my full code. The CSS modifications are only to hide the download button. But when I take it out I don't see the timeline. Very strange but exactly this code works for me.
<!DOCTYPE html>
<html>
<head>
<title>html5 audio player on iPhone</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
audio::-internal-media-controls-download-button {
display:none;
}
audio::-webkit-media-controls-enclosure {
overflow:hidden;
}
audio::-webkit-media-controls-panel {
width: calc(100% + 33px);
}
</style>
</head>
<body>
<audio controls preload="auto" style="width:100%;">
<source src="https://example.com/audio/audiofile.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio><br />
</body>
</html>
It seems the actual "fix" was really simple for me - all I needed is to make sure <audio> tag has enough width to show all the controls.
See screenshot below
Upper version
<audio controls preload="auto" style="width:100%;" >
<source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3" type="audio/mpeg">
</audio>
Bottom Version
<audio controls preload="auto">
<source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3" type="audio/mpeg">
</audio>
It may sound odd, but check that your HTML page has a as the first line.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My Page Title</title>
... and the rest of your page's code follows...
Safari is known to not render HTML-5 content without the proper DOCTYPE.
More Info:
http://www.wimpyplayer.com/docs/common/doctype.html
Searched for too long for this simple answer after it was working on Andriod, and I finally tested on iOS, this works if you're using ionic
import {normalizeURL} from 'ionic-angular';
MediaSource = document.createElement("audio");
MediaSource.src = normalizeURL(cordova.file.dataDirectory + file.fullPath);
Hope this helps.
same here with amp-audio
this css (sass actually) fix the problem
amp-audio {
[class*="amphtml-fill-content"] {
width: 100%;
}
}
Related
Under IOS, the solution no longer reacts to movements.
My solution has worked and now is no longer working.
Also the "hello world" example with the source code of Glitsch (see below) doesn't work anymore, but if you call the example from the a-frame start page (https://aframe.io/examples/showcase/helloworld/), it works.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, WebVR!Test VR</title>
<meta name="description" content="Test VR">
<script src="https://aframe.io/aframe/dist/aframe-master.min.js" ></script>
</head>
<body>
<a-scene background="color: yellow">
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
</a-scene>
</body>
</html>
What's the difference? What do I have to do to make my solution work under IOS again?
Unfortunately, Chrome (m74+) and Safari (iOS 12.2+) now ship with sensor access disabled by default. The user has to enable manually on settings:
chrome://flags/#enable-generic-sensor in Chrome
Settings -> Safari -> Motion & Orientation Access in Safari iOS
Content also must be served over https.
More info on: https://github.com/aframevr/aframe/issues/3976
I have a legacy cn1 app (using the old GUI builder) with a web browser component in the center of the Form (centered in a BorderLayout Container which is the main Form component). In the simulator as well as on an Android device the WebBrowser renders fine. In the iOS simulator the entire component shows up as a black rectangle, and on an iPhone (5s running iOS 9.1), the content of the WebBrowser is visible but doesn't scroll.
Is there some particular setting that needs to be changed for it be scrollable?
This is my code:
WebBrowser web = new WebBrowser() {
#Override
public void onLoad(String url) {
System.out.println("Article body webview loaded");
Component c = getInternal();
if (c instanceof BrowserComponent) {
BrowserComponent b = (BrowserComponent) c;
String text = ((String) m.currentArticleInfo.get("id"));
b.execute("loadArticle('" + text + "')");
}
}
};
((BrowserComponent) web.getInternal()).setNativeScrollingEnabled(true);
((BrowserComponent) web.getInternal()).setScrollVisible(false);
web.setScrollVisible(false);
web.setURL("jar:///article_body.html");
web.setScrollable(true);
web.getAllStyles().setPaddingTop(10);
form.addComponent(BorderLayout.CENTER, web);
I don't see any errors in the console. The web page code looks like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://www.example.com/styles/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body::-webkit-scrollbar{
width: 0 !important;
}
#left_side_article #right #the_article #details_info{
font-size: 3.5mm !important;
}
div#the_article{
border: none !important;
}
div#the_article_header{
padding: 0 !important;
}
</style>
</head>
<body style="min-height: 100px">
<div id="left_side_article">
<div id="right">
<div id="the_article">
<div id="details_info" >
</div>
</div>
</div>
</div>
<script>
function loadArticle(content) {
console.log('in load article function, article id: ' + content);
var url = "https://www.example.com/api/article_body_ajax.php";
$.post(url,{"app_code": "myappcode", "id" : content},function(data,status,jqxhr){
$("#details_info").html(data);
$("#details_info img").each(function(){
$(this).attr("src", "https://www.example.com/" + $(this).attr("src"));
$(this).css("height", "auto");
});
});
};
</script>
</body>
</html>
Update
I tried debugging the WebView by downloading the app sources and using Safari to inspect the page. Safari recognized that there was a web page open in the app, and I was able to choose it from the Develop menu in Safari, but the inspect window was completely empty - no elements whatsoever.
I just committed a fix for the scrolling issue in iOS here. There was a bug that caused scrolling to be disabled if you call setNativeScrollingEnabled(true). This fix will be available in the next library update (next Friday). In the mean time, you can work around this by just not calling setNativeScrollingEnabled(true) - as the default is true anyways.
That might be related to changes we made to getComponentAt see if this is still happening after the update this weekend. We discussed some of the regressions related to this here: https://www.codenameone.com/blog/dont-touch-that-code.html
The html looks like this:
<html>
<head>
<style type="text/css">
h1:before
{
content: '\292d';
}
</style>
</head>
<body>
<h1>Sample Text</h1>
</body>
</html>
So, I've already converted the '⤭' character to ASCII which shows fine in my desktop's browser; however, on iPhone, it's blank!
The problem could be with content: '\292d'; even though they say content is supported with safari 1.0 and up it still does not work properly.
i used it for displaying images and it used to show up in inspect element but not in browser window, the entity '\292d' is infact supported
instead Try putting it directly inside the tag, or use javascipt if you want it to be dynamically inserted
We have an app (monotouch/ios/xamrin.ios what you you like to call it) which uses a uiwebview for videoplayback. We create the following html
<html>
<head>
<style type="text/css">
body {background-color: transparent; color: white;}
</style>
</head>
<body style="margin:0">
<video width="100%" height="100%" controls="" autoplay="" name="media">
<source src="http://onsport.dk/7718125/8254704/f6a4e032d96f26dc127ded126a179e93/video_hd/kalormen-video.mp4" type="video/mp4">
</video>
</body>
</html>
and load this in our webview like this LoadHtmlString(content, null);. It has been working as it should, but now it does not work anymore. By that I mean that the playback button appears but nothing happens when clicked. I am not sure if it is caused by the newest ios(8) update but it seems to be the only difference from earlier.
I have tested the html with w3 schools and html loads fine
Do anyone have a suggestion to what I am missing.
Currently I am using the JavaFx Webview to load a HTML page. But there is a problem when it loads the HTML page. It doesn't read the letter-spacing or -webkit-letter-spacing attribute in CSS. It's fine with the Chrome browser. How can I make it work in JavaFx?
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>
<style>
.text {
letter-spacing: 20px;
}
</style>
</head>
<body>
<div class="text">
abcdefg
</div>
</body>
</html>
Looks like this property is not supported in JavaFX/JDK 7, but works for me in JavaFX/JDK 8. As far as I know, some of the WebViews rendering bugs fixed in JDK 8 won't be backported to JDK 7 and this one seems like being one of such bugs.