A video needs to be shown on a website. I used HTML5 and the tag with WebM, Theora/OGV and H.264/MP4. This video is looking nice on most browser/OS combinations, but the colors are distorted when watching it with Quicktime on Windows.
Is there a canonical way to ensure consistent colors? If there is not, can I order a browser to not use Quicktime on Windows if an alternative is available?
The current approach is taken from this tutorial.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testvideo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="video.css">
</head>
<body bgcolor="#000000" marginwidth="0" marginheight="0">
<center>
<H2>Endeavour</H2>
<video width="320" height="240" controls>
<source src="endeavour.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
<source src="endeavour.webm" type="video/webm; codecs=vp8,vorbis">
<source src="endeavour.ogv" type="video/ogg; codecs=theora,vorbis">
</video>
</center>
</body>
I'm not sure I understand your question 100% but the order you supply as sources will determine which video to prefer - if you want the webm file to be preferred you simply add it first:
...
<source src="endeavour.webm" type="video/webm; codecs=vp8,vorbis">
<source src="endeavour.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
<source src="endeavour.ogv" type="video/ogg; codecs=theora,vorbis">
...
You cannot force a browser to use (or not to use) a specific plugin installed by the user.
As to colors this depends on how the video files are compressed and how they are encoded.
Related
It just doesn't play.
This is the code for the player:
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="https://www.reportercatolico.com.br/audios/1cd5d4f1448ae07340406213d5da61dc.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
What am I doing wrong?
I am unable to get MathJax to change the font that it is using to render formulas written in AsciiMath. I have read the answers to similar questions here at StackOverflow and other places on the web:
Styling MathJax
Changing mathjax's font size
MathJax font matching and pairing
Can MathJax use font xxxx?
Here is an entire HTML5 document that I am using as a test case:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>MathJax Font</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"CommonHTML" : { preferredFont:"Asana Math" }
});
</script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_CHTML"></script>
</head>
<body>
<p>`v = pi r^2`</p>
</body>
</html>
What am I doing wrong? Please help me change the font for MathJax.
I found this at docs.mathjax.org/en/latest/output.html
The CommonHTML output processor produces high-quality output in all modern browsers, with results that are consistent across browsers and operating systems. This is MathJax’s primary output mode since MathJax v2.6. Its major advantage is its quality, consistency, and speed as well as support for server-side generation. Its browser supports starts with IE9 and equivalent browsers and it degrades gracefully on older browsers. The CommonHTML output uses web-based fonts so that users don’t have to have math fonts installed on their computers. It currently only supports MathJax’s default TeX fonts.
I had to change my file to use the HTML-CSS output processor instead of the CommonHTML output processor. After the change my test file now looks like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>MathJax Font</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS" : {
availableFonts : ["STIX"],
preferredFont : "STIX",
webFont : "STIX-Web",
imageFont : null
}
});
</script>
<script type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML"></script>
</head>
<body>
<p>`v = pi r^2`</p>
</body>
</html>
When attempting to validate a schema.org/Article against Google's Structured Data Testing Tool, I noticed that it gives an error if you specify an SVG image:
The value provided for logo must be a valid URL.
Required by:
AMP Articles (what's this?)
When the URL is changed to have a .png (or .jpg, .bmp, .webp, etc.) extension, rather than .svg, it passes validation.
Here is the example I'm working with:
<div itemscope itemtype="http://schema.org/Article">
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<meta itemprop="name" content="Example" />
<meta itemprop="url" content="http://example.com" />
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<meta itemprop="url" content="http://example.com/logo.svg" />
<meta itemprop="width" content="600" />
<meta itemprop="height" content="60" />
</div>
</div>
<meta itemprop="dateModified" content="2016-01-05T12:43" />
<meta itemprop="datePublished" content="2016-01-05T12:43" />
<meta itemprop="headline" content="Example" />
<meta itemprop="name" content="Example" />
<meta itemprop="author" content="Example" />
<link itemprop="mainEntityOfPage" href="http://example.com/article" />
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<meta itemprop="url" content="http://example.com/article.jpg" />
<meta itemprop="width" content="1200" />
<meta itemprop="height" content="800" />
</div>
</div>
Changing the other image's URL's extension will also produce the error.
I was unable to find any information on why it rejects SVGs in the Rich Snippets documentation or the AMP HTML spec. Does anyone have an explanation for this behavior?
Google has updated the documentation and specifically mentioned svg.
Logo image files should be raster (for example, .jpg, .png, .gif), not vector (for example, .svg), with no animation.
From one of the links you gave: https://developers.google.com/structured-data/rich-snippets/articles
Images should be in .jpg, .png, or. gif format.
Why? Who knows. Perhaps because SVGs still have some support issues in some browsers (particularly older ones).
Update: 2022 - after reading the google documentation, it seems they do now accept svgs. https://developers.google.com/search/docs/appearance/structured-data/logo#structured-data-type-definitions
I am a complete novice and am studying HTML5 and CSS.
I am building a simple web page (on my local computer not a server) on my C:/ drive to play a musical audio with controls.
My speakers and sound work fine when I am on any website, etc. but I cannot get this web page to play my audio file. All I get is a hiss.
I have searched and searched for what my problem is but cannot find it.
Here is my html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio.html</title>
</head>
<body>
<h1>Audio Demo</h1>
<audio controls = "controls">
<source src = "0124.wav" type="audio/wav">
<source src = "0124.mp3" type="audio/mp3">
</audio>
</body>
</html>
I would certainly appreciate any assistance.
Thank you.
The browser can be called the client - everything it can show you lives on some server. Luckily you can use your computer as a server. Put into the same directory where your above html file lives those wav and mp3 files. Then just point your browser at the full path to reach your html file (your URL) similar to
file:///home/scott/Documents/data/audio/play.html
evidently to show both files you may wish arrange as :
<audio controls = "controls">
<source src = "0124.wav" type="audio/wav">
</audio>
<br>
<audio controls = "controls">
<source src = "0124.mp3" type="audio/mp3">
</audio>
I'm wondering how if I can check the head of a HTML-document for existence of a particular string with cucumber.
Actually I'm interested in specific robots directives, so I launch in the first of my steps a browser (atm Firefox) and open a local site.
In the second step I check the entire html-code for a string:
#b.html.include?('<meta name="robots" content="noindex, follow">').should == true
And see my scenario failing at the second step. (expected true, got false)
Surprisingly a check for an partial string is succesfull:
#b.html.include?('name="robots"').should == true
But as soon as I check for
#b.html.include?('<meta name="robots"').should == true
or just
#b.html.include?('a name="robots"').should == true
I get a false again.
So, I thought the presence of whitespaces causes this behavior.
A quick check with only a bonus whitespace
#b.html.include?(' name="robots"').should == true
and the testscenario is green.
A search for a whole sentence in the document body
#b.html.include?('<h1>Yarr, that "is" supeb!</h1>').should == true
is also passing.
I've also tried to move the h1 heading into the head of the document (test still passing) and the meta-tag into the body (test is still failing)
I'm using cucumber 1.2.0 and ruby 1.9.3p0 with Firefox driven via watir-webdriver and wondering if I'm doing something wrong.
Actually I have just one feature with this simple steps and a minimal html-site with meta-data and this one "Yarr" sentence. No rails, no rake. OS X 10.7
Please tell me if I should provide more information… I'm tinkering with this stuff for hours.
Edit1: added the HTML of the site I check.
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<link rel="stylesheet" media="screen" href="/public/stylesheets/main.css">
<link rel="shortcut icon" type="image/png" href="/public/images/favicon.png">
<script src="/public/javascripts/jquery-1.6.4.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="canonical" href="google.de">
<meta name="robots" content="noindex, follow">
</head>
<body>
<h1>Yarr, that "ist" superb!</h1>
</body>
</html>
The Problem:
It seems that the properties of HTML tags will not always be in the order that they were written. See this:
puts #b.html
#=> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Home</title>
<meta charset="utf-8" />
<link href="/public/stylesheets/main.css" media="screen" rel="stylesheet" />
<link href="/public/images/favicon.png" type="image/png" rel="shortcut icon" />
<script charset="utf-8" type="text/javascript" src="/public/javascripts/jquery-1.6.4.min.js"></script>
<link href="google.de" rel="canonical" />
<meta content="noindex, follow" name="robots" />
</head>
<body>
<h1>Yarr, that "ist" superb!</h1>
</body></html>
Notice that the <meta content="noindex, follow" name="robots" /> is not the same order as your HTML file. This explains why your tests are giving the results they are.
Suggest Solution:
Assuming that you only care that the particular meta tag appears in the header (and not the particular order the tag is written), I would suggest using:
b.head.meta(:name => 'robots', :content => 'noindex, follow').exists?.should == true