Youtube iframe embed looping working in every browser except IE9 & IE10 - html

Here's my HTML...
<iframe width="1425" height="613" src="http://www.youtube.com/embed/IHJ-djBr0Q0?autoplay=1&controls=0&loop=1&wmode=transparent&modestbranding=1&showinfo=0&playlist=IHJ-djBr0Q0" frameborder="0"></iframe>
This autoplays and loops fine on every browser except IE9/10. It works in IE8 cuz it uses the flash player. I'm not sure why IE11 works and 9/10 don't though. Ideas?
Note: it DOES work if you have flash installed i believe, but I would prefer they use the HTML5 player.

I ran into this same issue and after extensive testing and Googling, I couldn't find a reason. I then tried a number of ways to get it to work, and I found that removing and reinserting the iframe into the DOM (and also re-registering the Player) worked.
Here's a codepen for it http://codepen.io/toddzebert/pen/XbYjdq
Note the var console = function at the top is only to provide IE9/10 commentary since those browsers don't like console.log in iframes (such as codepen's).

Related

Only one video is playing simultaneously on Safari (Mac)

I used Simple Peer(WebRTC), ReactJS for my video call service. In the video call screen, I used 2 video tags(contact video and user video) for video playback. When the call gets started after a successful connection, only the contact video is getting played(1st video tag) and when the contact turns off their video user video is getting played(2nd video tag).
This only happens on Safari(I only tested on Mac). It works fine in other browsers(Google Chrome, Firefox).
Is there a way to fix this issue?
WebRTC depends a lot on browsers and Safari has specific requirements (like strict order of tracks). Check JS console to identify any errors.
You can experiment with a turnkey html5 videocall solution that works and try to replicate.

Vimeo embed - black screen on IE & FF

I am having a stange behaviour with Vimeo, and I don't get what's going on...
I uploaded a couple videos, using a "plus" account". Everything worked out fine. BUT... Then I wanted to embed the videos in another website. Using the official "Iframe" method. And all I get on page load, is a black screen, instead of the video thumbnail... When I start playing the video, it works, but on load, all I get is that black screen.... It is like that visibly on browsers using the flash version (FF & IE) but I do get the good thumb on non-flash players (like chrome).
Am I doing something wrong ? What's even more strange, is that if I take any other video, not mine, and embed, it works perfectly, I get the thumb.
My video, Embedded : http://www.unpeuplusnet.fr/embed.html
Thanks for any possible help, my website should go live tomorrow !!
Bruno
Edit : I just tried using the old Flash embed version, it does not work any better...
http://www.unpeuplusnet.fr/embed2.html
Sorry, it was a bug on our end. Should be working fine now. I'd recommend keeping the iframe embed.

VideoJS Flash Fallback Not Working When Dynamically Changing Source

I'm having issues with my videos not being played back in firefox. I'm attempting to dynamically update one video element's source to play multiple videos without re-creating the element every time my function is called.
E.g., first click makes the video source = video1.mp4, next click maintains that video player, but changes the source = video2.mp4 without recreating the element.
My reason for doing this is to only have to use one filetype for all browsers. I realize I could just make another source tag under the video element and give it a MIME type of video/ogg and it would work with HTML5 in firefox, but I want to have a universal format to take the burden off my users.
I can get this to work perfectly fine in chrome, but when changing to firefox the flash player only plays the first video source then
for some reason becomes undefined.
Firstly, I created a video element inside a lightbox. The lightbox is opened through a function which is called onclick of an anchor tag. When the lightbox is opened, I initialize a videojs player of the video, then set its source to the URL passed into the function. I then load the player, and play it. This works perfectly fine in chrome with HTML5, but in firefox the flash fallback works once then breaks.
I was reading about the problem and thought my problem might be the fact that flash converts the video element into a flash object, then when I try to reference the video with the same ID again, it isn't found because it doesn't exist as a video element anymore.
Here is a code sample: http://jsfiddle.net/7WTrh/12/
I tested in chrome, and it works, but firefox does not.
Thanks for the help in advance.
When you're changing the source, you need to make sure you're passing the mime type as well, so video.js knows what tech it needs.
myPlayer.src({ src: "vid.mp4", type: "video/mp4" });

Firefox tells user they need a plugin to display an embedded webpage

There's a section on my site where I display data from another site, using:
<embed src="URL"></embed>
I recently discovered that this works fine for most people, but that Firefox users get an error telling them they need to install a plugin. I searched around for a solution and people seemed to find that specifying the MIME type worked:
<embed type="text/html" src="URL"></embed>
But this isn't working. I can switch to iFrames, but I dislike how they display the information. Any other suggestions?
Per spec, embed elements are only handled via plug-ins or an SVG renderer (and in the latter case behave just like iframe).
You can do <object data="URL"></object>, but of course that will also behave like iframe...
I've been having the same issue with an html5 game. It appears that Firefox doesn't support if you want to embed an external html file. This tag should only be used for plugins.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed
To embed an external html file into another page in Firefox you have to use iframe or object tags instead. For the interactive nature of my external page I used iframe and it worked in IE / Chrome and FF, I had to make the margins larger than the game itself.

MP3 Audio tag in Gecko-based (Firefox/Cometbird) browsers

I've been trying to work on a project to he able to turn loop on and off for the MP3 playing on a we page. I was using <embed> and tried changing the loop= property using a javascript getElementByID, but while the image swap would work, the song would still stay on the mode it was on at page load.
Someone else used the idea to use the <audio> tag, and made a togglefor loop=, and said it worked. I tried, and would not work. I went and tried on an example site, and it worked for OGG, but not MP3.
I researched it, and the only thing I could find was that Firefox didn't originally support MP3s due to LAME copyrights/patents, but started supporting the MP3 format in version 9.
What's even stranger, is that sometimes the player controls show up, sometimes they don't. I have random other information show up on the page on load, so can't say if it's random when it shows up, or related: but even when the controls load, the play button never works, and it doesn't start on autoplay. However, in Chrome, it loads up fine.
So to condense, when in IE, it loads the text to say it's not compatible with my browser, meaning I can have an <embed> for if it doesn't work: I just tried it.
Firefox, on the other hand, acts like it WILL load it, and doesn't show the alt text.
I read about some people having trouble with OGGs, talking about a MAME type, but I don't really know anything about that stuff, yet...
I'd really like some ideas on what to do about this, because it doesn't ever even show the text to say it's not supported, it's like nothing's there in FF/CB, and MP3s SHOULD be supported for the past 4 full versions, which I'm assuming is why it doesn't say it's not supported.
Firefox doesn't support MP3 in <audio>, precisely because it's still patented... I have no idea what made you think it's supported in Firefox 9.