Having a problem with Real player embed working when CSS files are referenced from a server location when running the 'test' simplified html webpage locally to replicate the scenario.
Here is the code which Doesn't work:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Realplayer Test</title>
<link href="http://domain.com/Content/Styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<object id="media"
classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
height=360 width=640>
<param name="controls" value="ImageWindow">
<param name="console" value="Clip1">
<param name="autostart" value="true">
<param name="src" value="rtsp://domain.com/mediatemp/93088761_hi.rm">
<embed src="rtsp://domain.com/mediatemp/93088761_hi.rm" console="Clip1" controls="ImageWindow"
height="360" width="640" type="audio/x-pn-realaudio-plugin" autostart="true">
</object>
<br>
<object id="media"
classid="CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA" width="320"
height="100">
<param name="src" value="rtsp://domain.com/mediatemp/93088761_hi.rm">
<param name="console" value="Clip1">
<param name="controls" value="All">
<param name="AutoStart" value="true">
<embed controls="All" console="Clip1"
type="audio/x-pn-realaudio-plugin" src="rtsp://domain.com/mediatemp/93088761_hi.rm"
width="640" height="100" autostart="true">
</object>
</body>
</html>
This is what gets displayed in the browser:
Here is the code what does work:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Realplayer Test</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<object id="media"
classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
height=360 width=640>
<param name="controls" value="ImageWindow">
<param name="console" value="Clip1">
<param name="autostart" value="true">
<param name="src" value="rtsp://domain.com/mediatemp/93088761_hi.rm">
<embed src="rtsp://domain.com/mediatemp/93088761_hi.rm" console="Clip1" controls="ImageWindow"
height="360" width="640" type="audio/x-pn-realaudio-plugin" autostart="true">
</object>
<br>
<object id="media"
classid="CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA" width="320"
height="100">
<param name="src" value="rtsp://domain.com/mediatemp/93088761_hi.rm">
<param name="console" value="Clip1">
<param name="controls" value="All">
<param name="AutoStart" value="true">
<embed controls="All" console="Clip1"
type="audio/x-pn-realaudio-plugin" src="rtsp://domain.com/mediatemp/93088761_hi.rm"
width="640" height="100" autostart="true">
</object>
</body>
</html>
Style.css is the same CSS markup in both instances. Any ideas why the player would stop working when the CSS file is referenced from a url location. I have uploaded the styles.css files to multiple servers and the same issue happens still.
Thanks.
Browser security would be the thing to look at, since programmatically loading CSS from a URL is now a security risk:
Starting with Firefox 23, Firefox blocks active mixed content by default. This follows a practice adopted by Internet Explorer (since version 9) and Chrome.
If your website delivers HTTPS pages, all content (image, script, video, stylesheet, iframe, font...) delivered via HTTP will be blocked by default. Consequently, your website may appear broken to users (if images don't load, etc.).
Note that since mixed content blocking already happens in Chrome and Internet Explorer, it is very likely that if your website works in these browsers, it will work equally well in Firefox with mixed content blocking.
References
Mixed Content Blocking Enabled in Firefox 23
Related
I am trying to validate my document as XHTML 1.0 Transitional (W3C).
I have the following error:
"document type does not allow element "noscript" here; assuming missing "object" start-tag"
which corresponds to this code:
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt=""
src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1096/?
value=1.00&label=Y-skCMY_QM&guid=ON&script=0"/>
</div>
</noscript>
</head>
But I get this validation failing. What is the problem? Please help me to solve this.
One of your solutions could be to place it in the body instead of the head of your document as following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt=""
src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1096/?
value=1.00&label=Y-skCMY_QM&guid=ON&script=0"/>
</div>
</noscript>
</body>
</html>
This results in:
This document was successfully checked as XHTML 1.0 Transitional!
Additionally, according to this answer, it seams that it doesn’t really make difference (I'm talking about head vs body here):
Have done the move with the Google Ad section outside of HEAD and just
in the BODY part itself. Really doesn't make a difference since when
it was moved, it was just right after the parameters used for the ads
to display.
Solution #2
In case You will need to get rid of the <noscript> at all, You can try to make the following:
<div id='noscript' style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt=""
src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1096/?
value=1.00&label=Y-skCMY_QM&guid=ON&script=0"/>
</div>
<script>document.getElementById('noscript').style.display='none'</script>
This makes things work absolutely the same as in the first solution. If JavaScript is disabled, <script>...</script> won't be executed, thus <div>...</div> would be shown.
The video doesn't play:
<asp:DataList ID="DL_Media" runat="server">
<ItemTemplate>
<video src="windowsmedia.ogg" controls="controls" width="215" height="160">
<object id='mediaPlayer' width="215" height="160"
classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft Windows Media Player components..."
type="application/x-oleobject">
<param name="fileName" value="res/Files/test.wmv" >
<param name="animationatStart" value="true">
<param name="transparentatStart" value="true">
<param name="autoStart" value="true">
<param name="showControls" value="true">
<param name="loop" value="true">
</object>
</video>
</ItemTemplate>
</asp:DataList>
Make sure your browser is compatible
First, make sure the browser you are attempting to view in supports the HTML 5 video element.
Sample code
Taken shamelessly from the developer site at Mozilla:
Embedding a video
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
Your browser does not support the <code>video</code> element.
</video>
Embedding a video with multiple sources
<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4" type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>
Specifying codecs required
<video controls>
<source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
Your browser does not support the <code>video</code> element.
</video>
Other samples on the site include controlling playback and fallback options.
Use source instead of object
<video controls>
<source src="res/Files/test.wmv" type="video/wmv">
Your browser does not support the <code>video</code> element.
</video>
I have a website that displays correctly in IE7, IE8, IE9, IE10, all PC and Mac versions of Firefox and Chrome, Opera, and Safari. But, in IE11, it displays part of the header and javascript, but none of the html. Any ideas?
http://www.ighome.com
The Network-tab in IE11 Developer Tools shows that there are no requests for your stylesheet, and your <head> content is rendered inline. This indicates that IE11 does not consider the content to be html (and won't parse it as such). You're sending your html with a content-type indicating that it's xml, but with a html doctype. I would try changing the content-type first.
General changes
You're serving html4 with the http-header Content-Type: application/xhtml+xml. It should be text/html.
Html4 does not have self-closing tags.
Your <style> are missing the type attribute.
You have inline styles. This is a personal issue between me and Mr Maintainability.
Some input elements is missing a <label>. Accessibility!
You nest some block elements within inline elements. This is more of a validation issue, I've seen no browser that actually has an issue with this.
Missing html-encoding within <a href="..." />. All amperands (&) must be encoded as (&). You also need url-encoding where approperiate.
There's no width attribute for <div>.
Specific errors
Line 17-27 has a <script> inside a <style>.
Line 196 has a <input> with two value attributes.
Asp.net useragent shazaam
I'm using my advanced superhero skill to detect that you're using ASP.NET. (Or at least have a hidden __VIEWSTATE field and a ASP.NET_SessionId cookie.) You'll need to add a browser configuration file for the asp.net javascript to work.
Asp.net uses useragent detection to determine what your browser supports. The useragent strings are matched against a browser configuration files on your server, and this populates the Request.Browser object. This information determines if your <form runat="server"> should render the __doPostBack-function or not. Internet Explorer 11 is the first Internet Explorer version which does not identify itself as MSIE, and the previous detection fails. You'll need to add a configuration file to your ~/App_Browsers folder (create a new one if missing). This snippet will configure IE11 with ecmascriptversion used to detect support for the postback javascript (among other things).
<browsers>
<!-- Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko -->
<browser id="IE11" parentID="Mozilla">
<identification>
<userAgent match="Trident/(?'layoutVersion'\d+\.\d+)" />
</identification>
<capture>
<userAgent match="rv:(?'version'(?'major'\d+)(\.(?'minor'\d+)?))" />
</capture>
<capabilities>
<capability name="browser" value="IE" />
<capability name="ecmascriptversion" value="3.0" />
<capability name="layoutEngine" value="Trident" />
<capability name="layoutEngineVersion" value="${layoutVersion}" />
<capability name="majorversion" value="${major}" />
<capability name="minorversion" value="${minor}" />
<capability name="type" value="IE${major}" />
<capability name="version" value="${version}" />
<capability name="preferredRenderingMime" value="text/html" />
</capabilities>
</browser>
</browsers>
I have flash object(video). And i want to open a page while on click on it. I have done it by taking it inside a div and on click of div i open the page. But its not working in chrome and IE. Its working fine in Firefox. My code is as below:
<div class="HouseImage" onclick="window.open('Contact','_self')" style="height: 300px;
overflow: hidden;">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="351"
height="332">
<param name="movie" value="Flash/Banner.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="Flash/Banner.swf" width="351"
height="332">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>
Content on this page requires a newer version of Adobe Flash Player.</h4>
<p>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
Please help me as soon as possible. Thanks in advance.
The best way is to open link via flash. If you don't have access to code you could write "special" flash loader, which would load Flash/Banner.swf inside itself, and have onclick event to load page.
You can also try putting transparent div or gif above flash animation, but it's a mess involving absolute positioning and it probably doesn't work on all browsers.
The Flex Application is set to 900 pixels width.
The object tag is set to 900 pixels width.
Firefox is rendering the object at 110% the size requested. So there is a blank vertical column on the right size of the object. (It does this if I set fixed height also)
If I set the width in the object tag to 810, then they match up, but thats too much of a hack for me to use.
Here is the object tag.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="FlashID" title="userlist">
<param name="movie" value="swf/userlist.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="swf/userlist.swf" width="100%" height="100%" >
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
I think this happens because of the outer <object> tag which doesn't do anything useful in FF anyway. You can easily verify this theory by omitting it for testing. If I'm correct, I suggest you use SWFObject to render the embedding code. Alternatively, you could add some CSS trickery to hide that border in FF.
The comments in the code say why that outer object tag is needed. It is there for Internet Explorer.