I have a multi-embedded favicon.ico file used in my html doc, it works everywhere except Safari. I have tried clearing cache but nothing seems to work.
<link rel="shortcut icon" href="favicon.ico">
Test case: http://chovy.dyndns.org/test/favicon.html
Favicon: http://chovy.dyndns.org/test/favicon.ico
Response header: Content-Type:image/x-icon
Does anyone know why this won't show a favicon for Safari?
Works for me
Screenshot is taken with Safari 6.0.2.
In case it is just cache problem, you might ignore that problem. Everybody else accessing the page for the first time with Safari will see the icon as there is no cache problem for the first timers.
Try adding type="image/x-icon" to the link tag. Also, safari will note clear cached favicons when clearing browser cache. You need to close Safari and manually remove the file WebpageIcons.db in ~/Library/Safari.
Related
I alredy change the favicon.ico to the logo file which I want to use In Vue-cli's public folder, and named it the same file name.
In web browser the Favicon and title be changed successful
but in the mobile browser neither safari or chrome are fail
I didn't use pwa so probably not have manifest.json problem
And I already tried to clean both browser's cache or open it on Incognito Windows, but still the same, is anything I neglect to do with my index.html or vue-cli config?
You can add <link rel="apple-touch-icon" href="/custom_icon.png"> so that your favicon is shown when you favorite the page or view it in that tabs view. This is mentioned here.
For the webpage itself its very likely your iPhone is still caching the old icon regardless of your attempts to clear said cache. In my experience trying to load the page with no network connection, waiting for the time out error and then connecting to the network and reloading the page is the best way to "force" the device to clear its cache. Alternatively with the dev tools open and a keyboard attached type command + option + r. If not, patience, it'll update... eventually.
I am trying to display a TVHeadend stream in the browser as a pre-cursor to get this running on my TV. So I whipped up this sample HTML code where 192.168.0.4 is my server running TVHeadend and the channel UUID is 3df2b09783d8afeb8a323f5025431df7:
<html>
<body>
<video width="720" height="567" autoplay="true" controls>
<source src="http://192.168.0.4:9981/stream/channel/3df2b09783d8afeb8a323f5025431df7?profile=webtv-h264-aac-matroska" type="video/webm">
Your browser does not support the video tag.
</video>
</body>
</html>
Whether I show the HTML page locally on my computer or served via a local Apache webserver, the result is always the same: I get an emtpy video player control. The network tab does not show any errors, neither does the console. It does bring a warning however:
"Empty src!"
However the src is clearly not empty.
When I copy the src URL to my browser (Chrome) and call it, it starts downloading the stream (instead of showing it, but that might be expected). Why does the video control not seem to be able to show the video?
Do I have any other debug options I can check out? This problem has bugged me for a while now and I have tried to drill down to the source of it by removing the TV SDK and all other side code just to see if the actual video will play (which it does not).
At first I thought it might've been an authorization issue but then why does Chrome seem to be able to download the stream just fine? I have logged on to TVHeadend in the same browser (in a different tab) to make sure that a missing logon is not in the way of things.
I have also tried putting : in between the "http://" and the IP address to pass the parameters required for basic auth - but to no avail.
Does somebody have any hints as to what might be the roadblock here?
I'm using the following classes to fix a header: navbar navbar-default navbar-fixed-top
This works perfectly on my PC:
But when checking it on iPhone or iPad, the header is only partially shown:
I'm using Bootstrap v3.3.6. Has anybody had this problem and were you able to fix it?
Have you tried resizing the browser on the pc to see where it goes wrong. If the layout is different there then on mobile you might need to add a meta tag.
Try adding this into your header:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
I tried this using browserstack and it looks fine to me. Maybe it's a particular version of Safari Mobile browser not working or something cached on your phone?
So I created a video using ScreenFlow on a Mac. Then exported it. It created an m4v file. Then I changed the extension to mp4 and tried it out in the following web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>Fooo</title>
<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
</head>
<body>
<video src="Demo.mp4" width="320" height="200" controls preload></video>
</body>
</html>
It does not play. If I move the pointer where the player is it will show the frame at where the pointer is. So all the frames are there but it will just not play the video. What did I do wrong? How do I fix it?
Following #heff's advice, I deleted the script line. Once it was deleted I get this error message: "Video format or MIME type is not supported."
How do I fix this?
.mp4 == .m4v Different extensions for the same container format. Though .mp4 technically is also equal to .m4a, but .m4v != .m4a. At least I'm pretty sure. :)
Sounds like an issue with your javascript library. Have you tried just using the video tag in a browser that supports HTML5 video, with no library? Just delete the script line and see what happens.
Otherwise try posting a link to the live page where we can check it out.
I don't know if you already solved this, but you should go see the information on this webpage: Video for Everyone!. Specifically, go see the first point of section 2.1 where the author explains that your server must use the correct mime-types, and section 3, where the author explains what codecs you should use (because not every web-browser can read .m4v files).
How can I test if <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> does work? Especially if I let Apache handle it via htaccess.
Is there something in the IE developer tools?
Check it in IE8. If it is not set, Tools > Compatibility View will be usable. If it is set, the option will be grayed out and not usable.
check the "page default" of document mode, from IE developer tool bar.
Do you see the "broken" document icon between search and reload icons in the image? This is the Compatibility View button. If the edge value set using the meta tag or htaccess header worked, the Compatibility View button is not shown.
Image courtesy of Frank Code blog; you may also have a read at the post, if you want. It's worth it.