I'm using JavaScript to insert video elements into the DOM but it doesn't work in Opera (v10.63). The element gets inserted but the video doesn't appear/play. Works in Firefox, Chrome and Safari. I'm still running some tests to see if I can get it to work but I just wondered whether anyone else had come across this issue.
On another note which might be helpful to others, it seems event delegation is only possible with Firefox and not Opera, Chrome or Safari. That's based on code tests I've done so it could be wrong but I can't get it to work.
Many thanks
You could try using the HTML5 Inner Shiv. I know it's more aimed at IE, but it might be worth a shot.
It's possible to add the video element to the DOM using JavaScript in Opera 10.63. The code below, for example, should work (I tested it in Opera 10.61 and Opera 11).
var vid, makevid;
makevid = function(e){
vid = document.createElement('video');
vid.src = 'path/to/an/oggtheorafile.ogv';
vid.setAttribute('autoplay',true);
document.getElementsByTagName('body')[0].appendChild(vid);
}
window.addEventListener('load',makevid,false);
You do have to be sure that you're using a compatible video format, though. Opera 10.63 supports Ogg/Theora and WebM. If you're using MPEG4/H.264, the video will not play in Opera.
(EDITED to correct video format support in Opera 10.6x. It does indeed support WebM)
EDIT 2: Note that if you use JavaScript to insert a video element in the DOM, you will also need to enable the controls by using vid.setAttribute('controls',true); or by creating custom controls.
Related
Inserting an animated SVG via jquery (or plain javascript) makes them appear static in Chrome and Edge, although they show up fine in Firefox:
$(".loader").prepend("<svg><use xlink:href='/images/icons.svg#loading-ring'></use></svg>");
Inserting from a separate file and using an object or img tag seems to work fine in Firefox and Chrome, but still not Edge:
$(".loader").prepend("<object data='/images/loading-ring.svg' type='image/svg+xml'></object>");
Also see:
jsfiddle
Am I going about this the wrong way or is browser compatibility just really spotty?
Yes, you are right, unfortunately edge and old ie doesn't support the svg animations with SMIL.
Check here: http://caniuse.com/#search=svg%20animation
I implemented a table-to-CSV download by changing an a link's href="download.csv" and download="data:application/csv;charset=utf-8,......"
It works in Firefox and Chrome, but not in Safari, for some reason. I've not checked IE yet.
Any idea what I should do to make it work cross browser?
Does ie10 support the ability to support copy and pasting an image. IE has the fileReader api which is nice, but it would be cool to have ability to paste a picture.
A good indicator that pasting images into IE10 is not possible, is the nice site http://pasteboard.co. The site tries really hard to allow pasting of images, however it fails for IE10.
For the sake of completeness:
In chrome/webkit you have to handle event paste and look into event.clipboardData.
In firefox you have to create a <div/> with attribute "contenteditable". See http://joelb.me/blog/2011/code-snippet-accessing-clipboard-images-with-javascript/
It seems that http://snag.gy/ supports copy and paste from clipboard of images in IE 10. At least it works for me. As soon as I change the mode to IE 8/9 it only works with a Java applet.
I'm having a problem where certain bit of code is working perfectly across all browsers until I come to Safari where it's giving me issues. I inherited this code, and I'm not a jQuery expert so needless to say I'm a bit baffled:
var xt_begin=$('#begin')[0];
xt_begin.currentTime = 0;
xt_begin.play();
"#begin" is an audio element that was set in the HTML that's using this code and the .play() function is in a jQuery plugin that's being used (Link to plugin).
In all browsers except for Safari, play is being defined as if xt_begin were an object of that timer class. In safari, however, it remains undefined and the code stops working. I have no idea how this happens or how to fix it. I can post more code if need be, any help would be appreciated.
**Update
Upon further investigation it turns out it is a DOM element, and I'm a bit thick. However, Safari seems to have a problem recognizing audio elements for some reason. It's identifying it as an "object HTMLelement" whereas Firefox shows it as "object HTMLAudioElement". I'm still stumped on this one.
**SOLVED
Apparently Safari needs quicktime installed on your desktop for it to use audio elements. That's gonna make this app I'm fixing completely useless, but at least I know now. Thanks for the help folks.
Really just a comment. The statement:
var xt_begin = $('#begin')[0];
is effectively the same as:
var xt_begin = document.getElementById('begin');
so xt_begin is either a DOM element or undefined (jQuery) or null (plain JS). Which is it?
In any case, you should probably follow with:
if (xt_begin) {
/* do stuff with xt_begin */
}
to avoid errors.
Try:
var xt_begin = document.getElementById('begin');
Instead of the jQuery line. That works across all browsers and will at least tell you if you have a jQuery problem or a Safari/web page problem.
Running into the following problem specifically in Safari 5.1.2 when attempting to use the javascript fullscreen api.
By copy and pasting the following lines into your browser on a loaded page, you can see the effect.
This works in Chrome 15 and Safari 5.1.2:
javascript:document.querySelector('body').webkitRequestFullScreen();
This works in Chrome 15 but fails silently in Safari 5.1.2:
javascript:document.querySelector('body').webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
ALLOW_KEYBOARD_INPUT seems like it should work in Safari, according to documentation here: http://developer.apple.com/library/safari/#documentation/WebKit/Reference/ElementClassRef/Element/Element.html
Any ideas why this isn't working?
This is known Safari bug. It can be sniffed during full screen switching:
someElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
if (!document.webkitCurrentFullScreenElement) {
// Element.ALLOW_KEYBOARD_INPUT does not work, document is not in full screen mode
}
Use this real time sniffing and thus your code will support future fixing bug in Safari.
someElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT) works in chrome.
And someElement.webkitRequestFullScreen() works in safari 5.1.7
All test base on windows 7.
I just ran into the same issue, and this is most definitely a bug.
This may be a case of the Undetectables. Guess we're gonna have to use good ol' browser sniffing.
...(/Safari/.test(navigator.userAgent) ? undefined : Element.ALLOW_KEYBOARD_INPUT)
[edit] ...in which case keyboard input isn't possible. So I guess it's best to cut out fullscreen mode in Safari for the time being [/edit]
Keep in mind that the fullscreen API is in a very early stage at the moment, and should not be used in production