How to Check if the browser supports HTML5? - javascript

EDIT I have changed some Javascript now, so if I can find a javascript function that detects HTML5 Video support, it should work.
I have a HTML5 video player that has flash fallback, if HTML5 isnt supported, I want it to fallback to flash. Im currently using
<!--[if !IE]><!--> then load my custom player
else use SWFObject to render it.
Is it possible to do the folllowing:
` If (HTML5 supported browser) {
<some html and script> (My custom player)
}else{
<different html and script> (I would call SWFobject here)
}
`
Trying to find a nice easy solution idea.
Usually I would be able to have an additional <object> in the video tag, but this won't be possible due to the way the player is inserted into the page.
Even though I can detect HTML5 support with a possibly unreliable method, I'm not sure how to have my HTML based on the output of the support

Have you had a look at http://www.modernizr.com/docs/#features-css
It can do feature detection

The better solution is to use something like Modernizr to do your feature detection on the client-side.Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features.
If your browser does not support the canvas API, the Modernizr.canvas property will be false.
if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}
Ref
Another solution if you are using JQuery:
Checking for support for the canvas element of HTML 5
var test_canvas = document.createElement("canvas") //try and create sample canvas element
var canvascheck=(test_canvas.getContext)? true : false //check if object supports getContext() method, a method of the canvas element
alert(canvascheck) //alerts true if browser supports canvas element
Ref

One liner check...
// Plain JavaScript
(typeof document.createElement('canvas').getContext === "function")
// Or... Using lodash
_.isFunction(document.createElement('canvas').getContext)

Check out everything at Dive into HTML5 especially the 'Detecting HTML5 Techniques' section. It has pretty much everything you may need.

Here is how w3schools does it:
function checkVideo()
{
if(!!document.createElement('video').canPlayType)
{
var vidTest=document.createElement("video");
oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
if (!oggTest)
{
h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
if (!h264Test)
{
document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
}
else
{
if (h264Test=="probably")
{
document.getElementById("checkVideoResult").innerHTML="Yeah! Full support!";
}
else
{
document.getElementById("checkVideoResult").innerHTML="Meh. Some support.";
}
}
}
else
{
if (oggTest=="probably")
{
document.getElementById("checkVideoResult").innerHTML="Yeah! Full support!";
}
else
{
document.getElementById("checkVideoResult").innerHTML="Meh. Some support.";
}
}
}
else
{
document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
}
}

Related

Is there a way to determine if a clip is audio or video as a project item?

I'm coding a Premiere plugin using the SDK provided by Adobe. I want my function to be able to be sensitive to whether the media is audio only or video (with or without audio), e.g. whether it's a .wav or a .mp4. I want this to happen before any clips are on any timelines, so I can't use the track.mediaType attribute.
I am trying to do this when the media is a project item but am not finding anything in the documentation (https://premiere-scripting-guide.readthedocs.io/4%20-%20Project%20Item%20object/projectItem.html?highlight=mediaType)
For now, this is what I'm doing:
GetProjectItemType: function (projectItem){
if (projectItem.name.includes("wav") || projectItem.name.includes("mp3") || projectItem.name.includes("AIFF") )
return "Audio";
else
return "Video";
}
There is a function that you can use referenced in the Adobe-CEP/Samples
projectItem.type
https://github.com/Adobe-CEP/Samples/blob/f86975c3689e29df03e7d815c3bb874045b7f991/PProPanel/jsx/PPRO/Premiere.jsx#L1614
ex.
if ((projectItem.type === ProjectItemType.CLIP) || (projectItem.type === ProjectItemType.FILE)) {
}
this can help you differentiate between other projectItems such as Bins, Clips and Files and you can use this in combination with your current implementation to ensure you have either audio or video projectItem and not bin

How can we make audio works in all browsers, what primitive can we use if a browser doesn't support it?

Well I am writing a web application using JavaScript and HTML5 and I have to put a sound notification in my web page, this is how I am calling it in JavaScript:
sounds: {
bip: new Audio('/sounds/bip.mp3')
}
But I want to make sure that this audio works in all browsers. So I have two questions:
How can I check if the audio works in all browsers?
I saw all the answers here and I also found solutions here:
DETECTING HTML5
FEATURES.
Using document.createElement() to test for browser support for an
element
So there was an answer for this question:
var test_audio= document.createElement("audio"); //try and create sample audio element
var audiosupport=(test_audio.play)? true : false;
But my problem now is:
How can I make sure that the audio will always play in all browsers? How can I replace the Audio() element with an alternative and compatible one?
How can I manage this?
You need this as an alternative for browsers that do not support audio element
<object data="/sounds/bip.mp3" >
<param name="src" value="/sounds/bip.mp3"/>
</object>
With JavaScript you could use something like this:
var obj = document.createElement('object'),
param = document.createElement('param');
param.name = "src";
param.value = "/sounds/bip.mp3";
obj.appendChild(param);
document.body.appendChild(obj);
You can check wether to use this or notusing Modernizr or with your code (have not tested):
var test_audio= document.createElement("audio"); //try and create sample audio element
var audiosupport=(test_audio.play)? true : false;
As you mentioned above you can easily check the compatibility, but I think as you can see in the comments this feature is rarely unsupported and there are few old browsers that doesn't support it and the main problem here is the MP3 codec support which you can test it with canPlay() and you can assure it like this:
var audio=document.createElement("audio");
audio.controls="controls";
//The mp3 source
var mp3Source=document.createElement("source");
mp3Source.src="myFile.mp3";
mp3Source.type="audio/mpeg";
//the ogg source
var oggSource=document.createElement("source");
oggSource.src="myFile.ogg";
oggSource.type="audio/ogg";
//Append the source elements to the audio
audio.appendChild(mp3Source);
audio.appendChild(oggSource);
Your currently used new Audio() construtor provides access to the properties of <audio> elements, as well as methods to manipulate them using :
mySound = new Audio([URLString]);
Take a look at MDN HTMLAudioElement Specifications where you can see that the new Audio() construtor is basically supported by approximately all browsers as you can see below:

JS/jQuery/mootools detect broswer supports HTML5

How do I detect if a browser supports HTML5 by
JS
(or)
jquery AND mootools.
Use modernizr to detect HTML5 and CSS features.
As the other suggested the best option is to use Modernizr, because it was created especially to do this work.
I don't know any plugin in jQuery that covers this functionality (jQuery.supports doesn't check much) but if you want you could try mooModernizr witch extends MooTools Browser.Features object
Another completely valid option is to check Modernizrs source code, and implment that with the features you want to detect.
To detect the video tag support is quite easy:
if (typeof HTMLVideoElement == 'function') {
alert('<video> tag supported');
}
That's in my opinion a simplistic version. Here is how the many times mentioned modernizr does it, which is a bit more bullet proof probably:
function supportsVideo() {
var elem = document.createElement('video'),
bool = false;
// IE9 Running on Windows Server SKU can cause an exception to be thrown, bug #224
try {
if ( bool = !!elem.canPlayType ) {
bool = new Boolean(bool);
bool.ogg = elem.canPlayType('video/ogg; codecs="theora"');
// Workaround required for IE9, which doesn't report video support without audio codec specified.
// bug 599718 # msft connect
var h264 = 'video/mp4; codecs="avc1.42E01E';
bool.h264 = elem.canPlayType(h264 + '"') || elem.canPlayType(h264 + ', mp4a.40.2"');
bool.webm = elem.canPlayType('video/webm; codecs="vp8, vorbis"');
}
} catch(e) { }
return bool;
}
Check out modernizr. It is an open source javascript library that specializes in detection of html5 / css3 features:
http://www.modernizr.com/

Detecting support for VML, help applying a previous post

I found the following in a previous post but need some help with it:
// For VML detection, here's what google maps does (search for "function Xd"):
function supportsVml() {
if (typeof supportsVml.supported == "undefined") {
var a = document.body.appendChild(document.createElement('div'));
a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
var b = a.firstChild;
b.style.behavior = "url(#default#VML)";
supportsVml.supported = b ? typeof b.adj == "object": true;
a.parentNode.removeChild(a);
}
return supportsVml.supported;
}
I would like to use the code to divert users to an alternative page when VML is not supported. Please could somebody show me how to write and implement the code to divert, say, to a page called alternative.html.
I have some knowledge of javascript but not this level!
Thanks.
You can just make a call to that function provided by Google, and it will return true if VML is supported and false if not. Don't forget, you will still need to add the xmlns for VML somewhere in your HTML.
if (!supportsVml())
window.location = "http://somedomain.com/no-vml.html";
Also, I would recommend using a cross-browser library for drawing vector graphics. There's a few to choose from in this blog post: Canvas/SVG/VML Drawing Roundup.
VML is only supported in Internet Explorer (as of 5.0) and is not supported in any other browser. So checking for IE should be just enough. This can be done in many ways, for example: !!document.namespaces

Stopping a iframe from loading a page using javascript

Is there a way in javascript of stopping an iframe in the middle of loading a page? The reason I need to do this is I have a background iframe streaming data from a web server (via a Comet style mechanism) and I need to be able to sever the connection at will.
Any ideas welcome.
For FireFox/Safari/Chrome you can use window.stop():
window.frames[0].stop()
For IE, you can do the same thing with document.execCommand('Stop'):
window.frames[0].document.execCommand('Stop')
For a cross-browser solution you could use:
if (navigator.appName == 'Microsoft Internet Explorer') {
window.frames[0].document.execCommand('Stop');
} else {
window.frames[0].stop();
}
The whole code should be like this, (unclenorton's line was missing a bracket)
if (typeof (window.frames[0].stop) === 'undefined'){
//Internet Explorer code
setTimeout(function() {window.frames[0].document.execCommand('Stop');},1000);
}else{
//Other browsers
setTimeout(function() {window.frames[0].stop();},1000);
}
Merely,
document.getElementById("myiframe").src = '';
Very easy:
1) Get the iframe or img you don't want to load:
let myIframe = document.getElementById('my-iframe')
2) Then you can just replace src attribute to about.blank:
myIframe.src = 'about:blank'
That's all.
If you wanted to load the iframe or image at a time in feature when some event happens then just store the src variable in dataset:
myIframe.dataset.srcBackup = myIframe.src
// then replace by about blank
myIframe.src = 'about:blank'
Now you can use it when needed easily:
myIframe.src = myIframe.dataset.srcBackup
If you only have a reference to the element, you need to use .contentX to get the document/window to run the accepted answer.
Checking that the iframe actually has a document is also necessary for dynamically added iframe elements.
function stopIframe(element) {
var doc = element.contentDocument;
//iframes wont have a document if they aren't loading/loaded
//check so JS wont throw
if (!doc)
return;
//try for modern browsers
if (doc.defaultView.stop)
doc.defaultView.stop();
//fallback for IE
else
doc.execCommand('Stop');
}
not support in IE
<script>
function stopit() {
window.stop();
};
</script>

Categories