I'm trying to use an SVG file in an IMG tag. In my local environment works, but when pushing to the server it doesn't. I assume I have an issue with the type of document served, but can't figure how to fix it. Here's the code that loads the SVG:
<img src="images/icon-reputation.svg" />
Here's my DOCTYPE and header info:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>SVG</title>
</head>
Any clues? Thanks.
Make sure your web server is serving the SVG files with the correct ContentType. You can check what the type is by looking in the Net/Network section of your (desktop) browser developer tools.
The way you configure the server depends on the server of course. But, for example, for apache it is:
AddType image/svg+xml svg
Related
I create a web browser in python3 with pygobject (gtk3 and webkit2) and I want create a home page include google. I create a html file with a iframe but I see the error :
Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
How I can set X-Frame-Options ? All the solution in the web is a configuration in a local serveur but I don't have local serveur.
Here is my home page
<!DOCTYPE html>
<html>
<head>
<title>(Nouvelle page)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<iframe src="https://www.google.com/"></iframe>
</body>
</html>
This is not something you can fix locally, unfortunately.
There is a similar question here: https://stackoverflow.com/a/8700754/2773979
The problem isn't that your page is missing that header, it is that Google sets this header precisely to prevent people from embedding the site into an iframe. Browsers comply to this by refusing to load/display the content of the iframe.
Note that there are solutions, like proxying the google page, but those are probably against the terms of service.
All of the following questions are related and some of them marked as fix but does not seem to be working.
My problem:
Problem with IE8.
I have Intranet site built on Primefaces 5.1.7,
JSF 2.2.8-04
Trying to disable compatibility mode of IE8 which is
enabled by default for Intranet web sites.
Problem is we want to set minimum browser requirement to IE8, but web side is run on Intranet domain so it by default runs on compatibility mode and IE8 user is not allowed to login.
Solution Available (Not working):
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</f:facet>
Following does not work:
Force IE compatibility mode off using tags
Force "Internet Explorer 8" browser mode in intranet
X-UA-Compatible not working in IE 9 for intranet sites
intranet jsf application opening in compatibility mode in IE9
How to fix Document mode restart in IE 9
Any help is appreciated.
First Edit
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link type="text/css" rel="stylesheet" href="/payroll/javax.faces.resource/theme.css.jsf?ln=primefaces-bluesky" />
<link type="text/css" rel="stylesheet" href="/payroll/javax.faces.resource/css/screen.css.jsf" />
<script type="text/javascript" src="/payroll/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces&v=5.1.7"></script>
<script type="text/javascript" src="/payroll/javax.faces.resource/primefaces.js.jsf?ln=primefaces&v=5.1.7"></script>
<link type="text/css" rel="stylesheet" href="/payroll/javax.faces.resource/primefaces.css.jsf?ln=primefaces&v=5.1.7" />
<script type="text/javascript" src="/payroll/javax.faces.resource/jquery/jquery-plugins.js.jsf?ln=primefaces&v=5.1.7"></script>
<title>Payroll Center</title>
<script type="text/javascript" src="/payroll/javax.faces.resource/js/script.js.jsf"></script><!--[if lt IE 9]>
<script type="text/javascript" src="/payroll/resources/js/selectivizr-min.js"></script><![endif]-->
<link rel="shortcut icon" href="/payroll/resources/img/favicon.ico" />
</head>
Second Edit:
Screenshot is from IE developer tool.
I removed that xml tag
There are two things in tool Browser mode and Document Mode.
Document Mode is getting changed to IE8 Standards but Browser mode remains the same, Browser mode is the key to change version which does not gets changed.
I might me wrong i am just guessing for now that document mode gives ability to run some IE8 features but still running under IE8 compatibility mode which is basicall version IE7. NOT SURE GUESS
Third Edit:
As per following blog you can not change browser mode but this was written in 2010. i am no sure how much valid this is but what he explains actually happening. But require second opinion if this is really true. http://blogs.msdn.com/b/ie/archive/2010/10/19/testing-sites-with-browser-mode-vs-doc-mode.aspx
Thanks again for your time
I have followed the walkthroughs to make an IIS Smooth Streaming publishing point support Apple devices, but have run into a problem: the target URL for the <video> tag generates a 404 response.
My isml is as follows:
<?xml version="1.0" encoding="utf-8"?>
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<meta name="title" content="" />
<meta name="module" content="liveSmoothStreaming" />
<meta name="sourceType" content="Push" />
<meta name="publishing" content="Fragments;Streams;Archives" />
<meta name="estimatedTime" content="36000" />
<meta name="lookaheadChunks" content="2" />
<meta name="manifestWindowLength" content="0" />
<meta name="startOnFirstRequest" content="True" />
<meta name="archiveSegmentLength" content="0" />
<meta name="formats" content="m3u8-aapl" />
<meta name="m3u8-aapl-segmentlength" content="10" />
<meta name="m3u8-aapl-maxbitrate" content="1600000" />
<meta name="m3u8-aapl-allowcaching" content="False" />
<meta name="m3u8-aapl-backwardcompatible" content="False" />
<meta name="m3u8-aapl-enableencryption" content="False" />
<meta name="filters" content="" />
</head>
<body>
</body>
</smil>
The html I'm using is:
<!doctype html>
<html>
<head>
<title>Apple streaming IIS test</title>
</head>
<body>
<h1>Live Stream</h1>
<video width="640"
height="360"
src="http://10.1.1.22/video.isml/manifest(format=m3u8-aapl).m3u8"
autoplay="true"
controls="true">
Live
</video>
</body>
</html>
Note that when I type the URL http://10.1.1.22/video.isml/manifest into my browser, I get the correct XML file for Silverlight-based streaming, but adding either (format=m3u8-aapl) or (format=m3u8-aapl).m3u8 (as per these instructions) causes a 404.
Edit: I've tried a few more things with no success, but they might give insight into what's failing:
The URL http://10.1.1.22/video.isml/manifest(foo=bar) gives me the exact same response as /manifest, suitable for Silverlight.
The URL http://10.1.1.22/video.isml/manifest(format=foo) gives me a 404.
The URL http://10.1.1.22/video.isml/manifest.m3u8 gives 400 bad request.
The URL http://10.1.1.22/video.isml/manifest(foo=bar).m3u8 gives me the Silverlight response.
So it seems the extension doesn't mean anything to the server but it can't parse it if parenthesized arguments aren't present. More importantly, it's clear that the server handler is actually running for /manifest(format=m3u8-aapl) but generating a 404 in some kind of sub-request. We can rule out the server not understanding the URL and failing to run the correct handler.
After exploring some related questions, I came across this answer: The stream needs to use h.264 video and AAC audio.
Unfortunately, it's not quite that simple. The free version of Expression Encoder 4 doesn't support h.264 or AAC; they are locked down and advertised as a paid feature. The thing is, Microsoft refuses to sell Expression Encoder anymore but nonetheless haven't made these features free or offered any kind of alternative! All the third-party options they suggest are astronomically priced and geared towards large corporations.
After searching painstakingly for a reasonably priced third-party replacement, I came across a program called Unreal Media Server which both supports h.264/AAC and will output to a Smooth Streaming publishing point. (Installing a DirectShow codec pack like CCCP is also necessary.)
Just when I thought I was finished, I discovered to my horror that attempting to stream made a w3wp.exe process crash. Saying 'yes' to the offer to debug showed me a stack trace with an access violation in mpeg2tssink.dll. Fortunately, the first (and only relevant) Google search result for mpeg2tssink.dll was this question where someone else had the exact same problem. The fix was to grant the IIS_IUSRS account full control of the C:\inetpub\media\archives folder where Smooth Streaming saves its video chunks. Then things started to work.
So in short:
On the computer which provides the video stream, install CCCP, Unreal Media Server, and Unreal Live Server.
On the server, grant IIS_IUSRS (or whatever user App Pools are run under on your version of Windows/IIS) permission to modify the folder where video fragments are kept, probably C:\inetpub\media\archives
I have a page where I display some audio .ogg/.mp3-files for listening in the browser (it is purchased products that are being displayed on a "receipt"-page).
The files are super in Chrome, Opera, Safari and Firefox and I can play them, pause, restart and everything.
Today I use a quick fix and forces the browser if IE to simulate IE7 version and then it works, but is of course prtty ugly-looking. I can also skip the <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> and use compatibility view and get same result.
In IE10 Win7 (got latest version) this is displayed and I cannot even press the play-button: http://snag.gy/kANRy.jpg
You can have a look for yourself at: http://energyshop.se/testry.php/
Also, myclient uses an older version of IE and its the same for her.
I can also add that if Ihit f12 and switch to compatibility view of IE10 the audio WILL be working and im able to listen to them - but not as soon as I unclick compatibility view.
This is the code used for the audio (TEST code) (and heres: http://pastebin.com/ENrPj8cx a full code version of my pdt.php):
<!DOCTYPE html>
<html>
<head>
<title>Tack för Ert köp!</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<link rel="stylesheet" type="text/css" href='/phpstyles.css' />
</head>
<body>
<?php
echo("<audio id='testry' controls preload='auto'>");
echo("<source src='/1.mp3' />");
echo("<source src='1.mp3' />");
echo("<source src='1.mp3' />");
echo("<source src='/1.mp3' type='audio/mpeg' />");
echo("<source src='1.mp3' type='audio/mpeg' />");
echo("<source src='/1.mp3' type='audio/mp3' />");
echo("<source src='1.mp3' type='audio/mp3' />");
echo("Your browser does not support the audio tag.");
echo("</audio>");
?>
</body>
</html>
and here is my .htaccess: http://pastebin.com/2mz8QwEV
Also, here is my head, meta and doctype for the page (its a pdt.php)
<!DOCTYPE html>
<html>
<head>
<title>Tack för Ert köp!</title>
<link rel="stylesheet" type="text/css" href='/phpstyles.css' />
<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
</head>
I know IE9+ supports .mp3 and I have it updated so whats up? Anyone?
ive seen a very similar issue to this one before. specifically dealing with .ogg and .mp3 file types in IE9 + html5 audio.
problem was resolved by tweaking the MIME type declarations in .htaccess file while the filetypes worked in other browsers just fine - IE9 alone was very picky about what it could work with...
going to investigate further - more info soon.
I am curious what is your hosting situation? (win / linux - self hosted / shared?) i initially assumed shared linux because of the php files as this was the most common scenario.
EDIT:
depending on the hosting situation - (you own the hardware / VPS / or are using shared hosting) some people have found their windows based hosting providers web.config files are in fact overwriting their mime type declarations but i was unable to verfiy as my hosting situation is linux based
after a bit of searching i found a few other documented cases of this issue and some other solutions involved:
for shared / hosted sites, this developer converted his mp3 files to .m4a which had working mime types within IE9
additionally if you are interested this Microsoft Developer Network article - details a bit of the reason why IE9 behaves this way
this stack question is similar to your issue on an Apache Tomcat server
Please check which of this formats are supported on IE: http://textopia.org/androidsoundformats.html. You could be able to inspect with the built-in developer tools and see how it's achieved.
Here, Microsoft Offers a Guide to Using HTML5 Audio.
And here about Unlocking the power of HTML5 .
just to add for completeness, add to your audio element the attribute, type and set this as 'mp3' or 'audio/mpeg' not sure which, but at least then you know for sure the page is clearly informing the borwser the type of the resource you are linking to.
If that doesn't work there aren't other options in HTML to define such resources and I would then be looking at support from IE10 as the issue?
I think this is due to your server not sending back the correct content type for the URLs you provide.
http://energyshop.se/testry.php/1.mp3 gives content type:
Content-Type: text/html; charset=UTF-8
http://energyshop.se/1.mp3 gives content type:
Content-Type: application/octet-stream
I see that you posted your .htaccess file at Why doesn't the audio tag work in IE?
You likely have the octet-stream type set to prompt downloads. Try setting it to "audio/mpeg" instead, and only set "/1.mp3" as the source on the audio tag.
I added this code to the head but when I try to post something about a website inside a Facebook page, the image that I specified is still not showing up as an option. I'm using wordpress as a CMS. Any ideas why?
<meta content="something" name="title">
<meta content="something="og:description">
<link href="thumbnail.jpeg" rel="image_src">
Try using the Facebook Debugger to pin-point the issue.
Sometimes there is a caching issue and feeding your URL through this tool forces Facebook to scrape your URL again hence refreshing the cached og:tags
Further more your og:tags should look more like this :
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
Notice the property attribute and not the content attribute that you (possibly) used. The correct syntax is available at this link : http://ogp.me/