Modern browsers except IE handle MJPEG (Motion JPEG). Here is an example fiddle.
Can I detect support for MJPEG? I have looked through Modernizr in vain.
Modernizr only supports the following formats for detection right now: ogg, webm and h264.
The video element has a call called canPlayType(format) that would really be your only option (if it works for mjpg). Your detection logic would look something like this (not the format would be different).
var videoElement = document.createElement('video');
if(!!videoElement.canPlayType)
{
var browserConfidence = videoElement.canPlayType('video/mjpeg; codecs="insert, them"');
if(browserConfidence == "probably")
{
// high confidence
}
else if(browserConfidence == "maybe")
{
// low confidence
}
else
{
// no confidence... it definately will not play
}
}
Make sure you visit the W3C's information on canPlayType. It looks like the mime type should be "video/mjpeg" and not "video/mjpg" as you specified earlier.
I've tried the most obvious way to detect if the image could be loaded or not:
$output = $('<img id="webcam">')
.attr('src', src)
.load(function(){alert('ok')})
.error(function(){alert('error')});
In case image could be loaded load event will be fired, otherwise error. Checked this in recent Chrome and IE8. Works as expected.
Sadly for this you would need to use an ActiveX control to support mjpg in IE. See How to embed mjpeg file on a webpage.
Related
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."
}
}
First of all, sorry for ressurrecting this question here.
I've been trying for two days how to reach this job using javascript/jquery and i think i've read all stack overflow and other blogs posts about that, so please, don't mark it as duplicated because I can't use out-dated scripts from 2012 now in 2017.
I've a single page that redirects to a third party e-learning platform where some content needs flash to work. Many users don't care about which software is installed on their machines (what a new, huh) so i need to detect it and show the tipical message "please install/update flash player clicking here", but i cannot find a "modern" script/way to do this, in any place, simplified, if possible.
All scripts i've tried are deprecated or returns false in all browsers, even i've newest version of flash installed and active.
Anny help will be appreciated (except links to older posts or scripts that don't work nowadays, obviously).
Thanks a lot!
There is a simple way to check for Flash since all the installed and enabled plugins will be listed in navigator.plugins;
Note that if a plugin is installed, but not enabled, it will not be detected in the navigator.plugins array. There is NO way to detect this using Javascript (this Question which confirms the same).
Having said that, use the following function isFlashEnabled(); to detect Flash :
<html>
<script>
if(isFlashEnabled())
{ document.write('Flash is installed (but may need to be enabled)'); }
else { document.write('Flash is either not installed or disabled'); }
function isFlashEnabled()
{
var flash = navigator.plugins.namedItem('Shockwave Flash');
if (!flash) { return 0; }
else { return 1; }
}
</script>
<body> <embed src="https://www.w3schools.com/tags/helloworld.swf"> </body>
</html>
You can get an array which contains all installed plugins of a browser like this:
var plugins = navigator.plugins;
Then you can then check if the array contains the flash plugin.
From https://developer.mozilla.org/de/docs/Web/API/NavigatorPlugins/plugins:
function getFlashVersion() {
var flash = navigator.plugins.namedItem('Shockwave Flash');
if (typeof flash != 'object') {
// flash is not present
return undefined;
}
if(flash.version){
return flash.version;
} else {
//No version property (e.g. in Chrome)
return flash.description.replace(/Shockwave Flash /,"");
}
}
I'm using Soundmanager2 to play some audio files in a web site, but not using Flash.
It works fine with Firefox and Chrome, as they support ogg and mp3 respectively. However, it doesn't work with Opera 12.16. Theoretically, it supports ogg, and pass the condition if( supports_ogg_audio() ):
It is returning 1 in this function:
function supports_ogg_audio() {
var a = document.createElement('audio');
return !!(a.canPlayType && a.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''));
}
So it detects ogg support. But as I'm doing:
currentRow = thisPlayer.find(".total-row:first");
I get this error from the Opera console:
Unknown pseudo class
[id='total-playlist'] .total-row:first
So I'm guessing that this is the problem. How could select the first thisPlayer.find(".total-row") element with better browser compatibility?
It neither works in Safari5+ and IE9+
You need to use first-child selector instead of first. See information here.
I'm currently working on a WordPress addition which loads full post content (normally it shows exceprts) when asked to. I did my code like this:
$(".readMore").click(function() {
var url = $(this).attr("href");
$(this).parent("p").parent("div").children("div.text").slideUp("slow", function () {
$(this).load(url + " .text", function(){
$(this).slideDown("slow");
});
});
$(this).parent("p").fadeOut();
return false; });
And it works. But I don't want images to be loaded. I tried .text:not(img), but it didn't worked. How can I do this?
The trick, of course, is preventing the images from being downloaded unnecessarily by the user's browser; not displaying them is easy.
I only have two browsers were it's easy and convenient to tell what's downloading: Chrome and Firefox+Firebug. In my tests, Martin's solution using *:not(img) results in the images being downloaded (although not displayed) in both Chrome and Firefox+Firebug. (I emphasize "Firefox+Firebug" because Firebug can change the behavior of Firefox on occasion, and so it may well be changing its behavior here, although I don't think it is; more on that below.)
It took some tweaking, but this seems to do the trick (more on testing below):
$.ajax({
url: url,
success: function(data) {
var div = $("<div>").html(data);
if (stripImages) {
// Find the images, remove them, and explicitly
// clear the `src` property from each of them
div.find("img").remove().each(function() {
this.src = "";
});
}
$(targetSelector).append(div.children());
},
error: function(jxhr, status, err) {
display("ajax error, status = " + status + ", err = " + err);
}
});
Live example The "Include big image" checkbox includes a large file from NASA's Astronomy Picture of the Day (APOD).
The key there was setting the src of the img elements to "". On Chrome, just removing the elements was enough to prevent Chrome starting the download of the images, but on Firefox+Firebug it not only started downloading them, but continued even when the download took considerable time. Clearing the src causes Firefox to abort the download (I can see this in the Firebug Net console).
So what about IE? Or Firefox without Firebug? I only did unscientific testing of those, but it's promising: If I run my live example of Martin's solution on either IE or Firefox without Firebug in a VM, I see the VM's network interface working hard, suggesting that it's downloading that big APOD picture. In contrast, if I run my solution above in that same environment (with caches cleared, etc., etc.), I don't see the VM network interface doing that work, suggesting that the download is either not being started or is being aborted early on.
.text *:not(img) will select every descendant from .text that is not an image, so in theory it should work.
I've been using swfobject for a recent project, and its great. But now that I've managed to get FlashSwitcher up and running in Firefox I notice that when I'm running Flash Player 7 the info displayed when I am running a version lower than I've specified has been customised (in this case by the Moodle page the the swfobject embed code sits in). Attached is a screenshot of that output SWF, as generated by Moodle. I can confirm that some of my users also see this, so my FlashSwitcher is functioning correctly.
Most of my use cases are outside of the Moodle context, they're standalone, what I'm after is exactly how they customised it, how I can change their customisation, and how I can do the same when the swfobject detection is standalone.
Please note that enforcing the user to upgrade their Flash Player plugin via ExpressInstall has been frowned upon by the client, they want suggestive actions and a link - but no auto installs or similar.
My implementation uses the 'twice cooked' method as I have an accessibility requirement to show non-Flash content should a user have neither Flash, Javascript or both. Here's my embed method call, which executes when a YUI2 document load event fires:
swfobject.embedSWF("../../swf/video-loader.swf", "flash_object_a", "877", "400", "8.0");
Ultimately I want to customise this "old version" output to be something I've created/written.
cheers,
d
You can use swfobject's getFlashPlayerVersion method (explained here) to check for Flash Player version and take appropriate action.
A simple example would be:
var has_version_8_or_greater = swfobject.hasFlashPlayerVersion("8");
if(has_version_8_or_greater){
//embed SWF using SWFObject
} else {
//Check to see whether an older version of Flash is found.
var version = swfobject.getFlashPlayerVersion();
if(version.major > 0){
//You have Flash but it's too old.
var version_str = version.major + "." + version.minor + "." + version.release;
alert("You have Flash Player version " + version_str + ". Please update!");
} else {
//You don't have Flash.
}
}