No HTML5 Canvas - html

I'm trying to create a page on my WordPress site using an HTML file. When I enter the code and preview the page, the title and footer are displayed, with the message "No HTML5 canvas!" in between them. I have this line of code in my script, which as far as I understand should be creating the canvas:
<canvas id="screen" name="screen" width=480 height=480 class="noselect">No HTML5 canvas!
</canvas>
This is my first time working with HTML, apologies if I'm missing something. Any help anyone can provide would be appreciated.

your code is working fine, here is a fiddle to prove it, the problem might be your browser
<canvas id="screen" name="screen" width=480 height=480 class="noselect">No HTML5 canvas!
</canvas>
check out this page for a list of browsers that support html 5 canvas

Contacted WordPress support and it turns out the site simply doesn't support Canvas.

Could you not code your html file the way you want with your canvas tag in it, upload it to an external site and then in your WordPress site use an iFrame and set the src to be your html file with the canvas tag? This might be a way around your problem
<iframe src="http://www.google.com"></iframe>
Or either try this http://www.learnopengles.com/how-to-embed-webgl-into-a-wordpress-post/

Related

plugin needed when displaying inline pdf with object tag

I am displaying an in-line PDF with the following code:
<object data="document.pdf" type="application/pdf" height="400px" width="600px"></object>
For most, this renders fine.
I have a user who is using Firefox version 45 who is getting an error saying "Plugin needed to display this content" - see below image:
I am just now starting to use PDFs with HTML so not completely familiar with this - and am only using it for specific purposes and when I need to do it.
Obviously I need it to display properly in all browsers and any help on how I can prevent this from happening would be appreciated.
I took a look at your issue and did some snooping in a bunch of forums and even in the Mozilla help section itself.
As best as I can tell, as of at least 9 months ago according to a couple of the forums I saw, there is no fix for that bug with Firefox 45.
That said, there is a bit of a work-around that you could do to allow visitors to still have access to that PDF. I will give you some code to try and then I will provide an explanation. Here goes...
<object data="document.pdf" type="application/pdf" height="400px"
width="600px">
<p>This browser does not support PDFs. Please download the PDF to view
it: Download PDF.</p>
</object>
So basically what is going on is you have to provide a "fall-back" for the visitor to go to so they can download the pdf to look at it. There are other tags you can use, like the embed tag and I believe iframe tag, but the object tag is the only option that allows you to provide a fall-back for your visitors if their browser doesn't support something.
By the way, it is weird if there truly isn't a plugin for Firefox 45, because the tag has been supported in browsers for the longest time!
Anyway, I hope that helps and please post your results. :)
Oh one more thing! Here is a link to a website that has been useful to me. You can use it to see which browsers support a particular thing or not. The site is:
http://caniuse.com/

Black box instead of iframe youtube video

The code provided below is present in an html file. When opening the file in Firefox there is a black box being shown instead of the video. Does this mean an addon, extension, or application needs updating or a setting in Firefox needs changing?
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
</body>
</html>
I made a mistake. This code actually worked, but I thought it didn't work a few times even though it did. I actually tried using a different Youtube video, and it wasn't working because I manually coded what src equaled incorrectly as opposed to just right-clicking the Youtube video and selecting "Copy embed html". So the problem had nothing to do with browsers, addons, plugins, extensions, or updates. I just had incorrect code for src.
Note: Use the "Copy embed html" feature as opposed to manually trying to enter in the code.

Object tag content disappears in Safari/Chrome

We allow users of our application to embed a webpage containing a set of thumbnails into another third party webpage/blog etc. The embedding is done by using an object tag.
Each thumbnail provides an option to download original file. When user clicks on this option, the embedded content is disappearing in Safari 5.1.1 and Chrome 15.0 and instead "Could not render embedded content" is shown. Whereas FF 8.0 works correctly i.e. the embedded page stays there even after download, as it should.
The embed code we are using is like this -
<object data="http://myserver.com/em.aspx?e=FytXStk=" height="600" width="900" type="text/html">
<p>Could not render embedded content.</p>
</object>
Can anyone see what might be wrong here? Thanks.
I had to add target="_parent" for the download link. That did the trick.
Actually, if you just choose "Shockwave" instead of "Flash" from the drop down menu for video type, it all works perfectly.
Joomla Core Team has gotta do a better job on notifying developers and webmasters. It's obviously not obvious.

HTML5 Video not auto-playing

I'm requesting this chunk of html from a mysql database:
<p>Hello.<br><video src="video/hi.mp4" width=100% height=100% autoplay="autoplay"></video>
It displays, but won't autoplay. On a static HTML page it goes off without a hitch.
The request comes from an ajax call for a matching keyword that is being typed into a input bar.
Any ideas?
Only thing I can imagine is that the browser has not finished loading the page and or not getting a onload(). Can you start the video using a script?
<video id="video" src="video/hi.mp4" autoplay ></video>
<script>
document.getElementById("video").play();
</script>
Aren't some quotes or attributes missing?
<video src="video/hi.mp4" style="width:100%; height=100%;" autoplay="autoplay"></video> ?
Your web browser doesn't know that the HTML came from an SQL database, so it's not likely that it behaves differently in the two cases. I'm inclined to assume that there is some other problem with the page.
What are the URLs of the static and dynamic pages? Does the relative URL "video/hi.mp4" resolve to the address of your video correctly in both cases?
According to http://pauljacobson.org/2010/01/22/firefox-and-its-limited-html-5-video-support/, Firefox only supports ogg formatted videos.
Fixed mine by using autoPlay instead of autoplay.

Show SVG files on Sharepoint 2007

I'm building a WSS site which has to show SVG files stored on WSS.
I'm trying to use <object> tag to show it and it doesn't show, however, if I use <embed> it works ok. Im'using IE8 and IE7
I've been reading and everyone tells IE prefers <Object> over <embed>, but in WSS it doesn't work this way.
To display the file I'm using a web content editor webpart with this code:
<object type="image/svg+xml" data="/samples/sample.svg"
name="owMain" width="400" height="150">
</object>
Any clue??
I've found that it's not actually necessary to embed SVG as an object.
If you use the SVGWeb JavaScript library, you can actually put your SVG into a normal Content Editor Web Part via the Source Editor, and manipulate the SVG elements via JavaScript.
The library can also work with a referenced SVG file as an object, but I haven't tried that option.
The library is hosted on code.google.com
You cannot add object tags to the html content of a page in WSS. The issue is that the object tag can be used in lots of very bad ways, so it is stripped out by the underlying engine.
You have found that the content editor webpart does not suffer from the same limitations.
The first step, if you haven't already, is to confirm that the HTML content in the response is as you expect (e.g. view source). If it isn't then you've found your issue. If it is, the next step might be to use a debugging proxy like Fiddler to confirm that all of the related requests are being made and handled as you expect. If they're not then you've found your issue (e.g. security). If they are then by the process of elimination you can safely conclude that either the markup or the browser is lacking.
Is it me or IE does not support SVG? Well, it kinda does but it is tricky and it's to draw, not to show svg files. ... If you open with FF can you see what you are expecting?
added
I made an svg draw in IE ... it's not the same, I know, but it's something that you can read and test: stackoverflow.com/questions/536676
I managed to do this on IE7/8 with the following Html:
<embed width="600" height="450" id="objMapView" src="http://XXXXXXXX/file.svgz"
type="image/svg+xml" name="objMapView" border="1"/>
It works Ok bur requires adobe's SVG Plugin