IE and html5 videos just stop working - javascript

I am using jQuery to hide and show a complex page. Within that page are numerous video tags.
Eventually in IE11 the videos just stop serving. Response code 200 typically, though 206 has been seen often on some.
html:
<video id="m1-video" class="m1-video story-video active">
<source src="http://www.somesite.com/videos/m1.webm" type='video/webm;codecs="vp8, vorbis"'/>
<source src="http://www.somesite.com/videos/m1.mp4?v=1234" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
</video>
Each video will have an event listener on it, like this:
('#m1-video').get(0).addEventListener('ended', closeM1, false);
And they are typically triggered in a series of callbacks like so:
$('#cruise').animate({opacity:1, width: $(window).width(), height:$(window).height()}, 1000, function(){
try {
$('#m1-video').get(0).currentTime = 0;
} catch(error) {
if (error.code === 11) {
//do something or nothing. I dont care
}
}
$('#cruise-info').animate({left:0}, 500, function(){
$('#cruise-info-1 h2').css({top:'50%', opacity:0}).animate({top:'45%', opacity:1}, 1200, 'linear', function(){
$('#m1-video').fadeIn(500, function(){
$('#m1-video').get(0).play();
});
});
});
});
htaccess has the video lines in it:
AddType video/mp4 .mp4 .m4v
AddType video/webm .webm
The code is pretty basic. on callback of some routine, find the video and trigger .play() this works in all browsers, and it even works in IE, except that after a while, like 30 page loads, it stops serving videos and gives me a blank screen.
Normal conditions calling something like document.getElementById('m1-video').error returns null. But when it starts acting up document.getElementById('m1-video').error.code returns 4 - which suggests improper encoding. Except that it worked fine for several dozen loads and that same identical encoding profile works for basically every site we build (h264 standard mp4 encoding). Sometimes I can clear browser cache, and close the browser and reopen it, and I will get one video that might finish playing. Usually doesn't. No errors reported.
So maybe someone out there has heard of special instances where using jQuery, dom manipulation and html5 videos in IE11 results in IE stupidity... and perhaps had some way to fix this or at least a better means for troubleshooting than relying on IE's immaculate collection of developer tools.
Never the less, it is worth a shout out to the SO community.
PS - sorry about the verbose post. I don't know if I can succinctly reduce this to a quick question. If I had to try I would say "Has anyone else encountered problems playing html5 videos in IE where constant dom manipulation is happening"

Answering my own question here:
Turns out IE has some issues loading many video tags on the same page, which is a dynamically loaded page and a massive collection of dom animations all intermixed. I don't know what specifically triggered the problems, but I do know how I fixed it:
I removed all video tags from the dom, and replaced them with container tags:
<div id="c-m1-video">
</div>
Then instead of assuming the video is loaded and present, I create a new video element and add the values, then append them to the container:
var video = $('<video>').addClass('story-video').attr('id', 'm1-video');
var src1 = $('<source>').attr('src', 'http://www.somedomain.com/videos/m1-video.webm').attr('type', 'video/webm;codecs="vp8, vorbis"');
var src2 = $('<source>').attr('src', 'http://www.somedomain.com/videos/m1-video.mp4').attr('type', 'video/mp4;codecs="avc1.42E01E, mp4a.40.2"');
video.append(src1).append(src2);
$('#c-m1-video').html(video);
$('#m1-video').fadeIn(500, function(){
$('#m1-video').get(0).play();
if(!$('#m1-video').data('events'))
{
$('#m1-video').get(0).addEventListener('ended', someCallback, false);
}
});
In the callback, I remove the video:
$('#c-m1-video video').remove();
I also removed any instances of canvas elements used to trick ios into displaying videos at full container width. This related SO article addresses the issue.
I have the htaccess rules in place:
AddType video/mp4 .mp4 .m4v
AddType video/webm .webm
And I moved all videos to the root directory in case the CMS was conflicting. The I added an htaccess rule to ignore the videos directory for the videos.
All together I finally got the videos working on IE11 and IE10. If anyone else has a similar issue, hopefully these tips will help you escape the burning nightmare of IE.

Related

flash mp4 playback with videojs in firefox - audio plays but video is blank

So I'm using videojs to render some mp4s coming in from instagram dynamically. I'm using this function to call the player, and it works great until it comes to firefox:
// o is the jquery object for the video
var vid_obj = o.find('video')
var vid_id = vid_obj[0].id
settings = vid_obj.attr('data-settings')
if (settings) settings = $.parseJSON(settings)
if (vid_id) {
settings.height = vid_obj.height()
videojs.options.flash.swf = "/scripts/vendor/video.js/video-js.swf"
videojs(vid_id, settings)
}
When I run the script in Chrome or any other browser with native mp4 support it loads fine, even if i specify flash as the default for tech order. In firefox, the audio plays but the video is blank.
In addition, I'm getting these errors from firefox:
Specified "type" attribute of "video/mp4" is not supported. Load of media resource http://distilleryimage6.s3.amazonaws.com/6ccd80e8561211e38d000a4507324e8b_101.mp4 failed.
All candidate resources failed to load. Media load paused.
Specified "type" attribute of "video/mp4" is not supported. Load of media resource http://distilleryimage6.s3.amazonaws.com/6ccd80e8561211e38d000a4507324e8b_101.mp4 failed.
All candidate resources failed to load. Media load paused.
I dug around a bit on stackoverflow and found this thread: Issue with the flash fallback of VideoJs with Firefox
Also, this interesting point
I did run into an issue on Firefox where the Flash fallback would play the video but the video would be blank (audio would play) when I included a "ready" event. I was able to get around this by firing a blur event on the $(this) object. That may be helpful to you if you need to use ready.
I tried adding the .ready() callback with the $(this).blur() with no success. Any suggestions?
You can also post your own answer and accept it if you prefer (since you are indeed the one that found the solution), but here's the answer from GitHub in case someone else stumbles on this question.
Solution below is from Video.js GitHub issue #854. Question and solution was provided by uxtx.
#mmcc, thanks for your help. I whipped up this dynamic video mockup (http://jsfiddle.net/nbAN5/5/), and it was working perfectly for me. Did some more digging and there was an issue in my implementation where videos getting animating was causing the flash object position to be mistranslated. Adding a css rule to reset the translation resolved it, IE:
object.vjs-tech {
-moz-transform: translate(0,0)
}
Note: if you're using videojs youtube plugin which i believe uses iframe, you'll need to use that same fix to resolve that translation issue as well.
If it is the same problem that led me here, then it's an issue with the Webkit implementation that Qt 4 uses on OSX. The solution is to upgrade to Qt 5 which uses a newer version that doesn't throw TypeError's when trying to play MP4 videos.
This details the specifics of my problem and the solution:
http://magnemg.tumblr.com/post/113251336220/how-to-solve-a-capybara-webkit-and-video-js

webkit mediagroup seeks to the end when .pause() is called in chrome

I'm trying to use webkits mediagroup (link to apple developer guide pdf, see page 42) to sync two html videos but it keeps giving me a headache. The MediaController doesnt seem to be working properly. In chrome the video seeks to the end of the video every time I call .pause(). Here is what the setup looks like.
(I only used one video here, but the result is the same if you use two videos and set the same controller on both of them)
HTML
<video id="video" src="http://videos.mozilla.org/serv/webmademovies/popcorntest.mp4"></video>
JS
videoController = new MediaController(),
video = document.getElementById('video');
video.controller = videoController;
$('#somebutton').on('click', function() {
videoController.pause();
});
Here is a fiddle. (In safari this fiddle works if you set the "autoplay" attribute on the video, otherwise the video wont play.)
According to Apples guide (referenced above) this is one of the two ways to set it up. The other way is to set a mediagroup="videoController" directly on the video tag and then access the controller with document.getElementById('video').controller. I tried both with the same result.
Is this a bug in Chrome or is it not just implemented the same way as in Safari? Seems too odd to be intended.
It's a bug in chrome. Here is the issue.

HTML video in popup box randomly plays/doesn't play in Chrome

This will once again be one of those question there's probably no answer to, but I'll try it anyway.
I created a custom WP plug-in that takes a folder name and outputs all videos inside the folder as images, which when clicked make a video pop-up. The video has custom controls (only play/pause and mute) and I'm using fancybox to make the video pop-up.
Everything works reliably in Opera and Firefox. The video doesn't bother playing in IE9 and, what's most annoying, it sometimes plays in Chrome and sometimes doesn't. (btw Safari won't even pop-up, no idea why).
The plug-in is quite a piece of code, but the end result is a bunch of links with an image inside and a hidden div that contains the links relevant to the current video. Then there's the video container, which is the code for the pop-up. Upon clicking one of the links, the src of the video is swapped for the one that is in the hidden content of the link.
It's quite hard to explain, so please have a look at the code on the website:
http://londoncreativedigital.com/downloads/creativeshowcase/
If you're still reading, here's the plug-in's code
https://github.com/marian-cerny/simple-video-embed
Video playing/pausing is handled in assets/player-controller.js.
I would greatly appreciate any help. I just can't logically explain what can be the reason for this. I tried to debug the JS, but couldn't come up with anything.
For a second I thought that adding a webm video would help, but it doesn't. It behaves the same way, even after adding a webm and removing the mp4 version. (tried on localhost, the online version doesn't have the webm vids).
You hardly ever need to blame your markup or javascript, suppose there is something different than this. I've been it such situations couple of times. All right, here is what I did.
opened video directly in chrome and FF.
open the developer bar on both, and look up the net(network) tab, where you suppose to see headers and other loading information.
in my case here is only one request in FF, and multiply from Chrome and there is canceled or pending only.
tryed the same with ogg clip, it is good in FF though chunked, and bit better in Chrome, part of requests are in pending, part canceled and fiew is good.
What could be wrong here, all right, as I said I do have similar problems in the past, I worked with professional movie maker, who do very good with all that codecs stuff. I just showed him perfectly working mp4 video from the videojs.com and he fixed his somehow by changing encoder or something like this. Unfortunately, I could not connect him how and ask, but probably it gives you some ideas. Please whenever you will be able to solve it, update status over here, I was bit intrigued all that times but had no chance to resolve my curiosity.
Your video was only once worked for me, but I am not sure if it was mp4 or ogg at that point. Also I am on win7 with latest Chrome and FF.

VideoJS event ended fired on start in Firefox

I'm using video JS and in firefox the event "ended" gets fired at the end and at the beginning of the video play.
Take a look to that fiddle in FF: http://jsfiddle.net/planadecu/a3Chu/
In all the other browsers work correctly.
The piece of code called at the video start is the following:
var videoPlayer = _V_("video", {}, function(){
this.addEvent("ended", function(){
this.posterImage.el.style.display = 'block';
});
});​
I need to trigger an event just at the end of the video, not at the start.
Do you know a way to workaround this issue (to me its a bug) ?
You can reproduce it on the fiddle provided.
Thanks for your help.
I think this is a problem with your video...
Check this out: http://jsfiddle.net/a3Chu/2/
All I've done is removed this source file:
<source type="video/webm" src="http://www.reservango.com/static/video/reservango_video_vfinal_CAT.webm">
I noticed that the script is firing correctly - the video starts at the end(!)
I tried with alternate .webm files and they behaved normally, so I'm stuck thinking it's something with your file in particular.
I've used FF 15.0.1 for testing
EDIT
I've also tested this on FF 16.0.2 - still seems to be that video file in particular. You can, of course, change up the source so that the other formats are attempted first. I know that my FF will run the .ogv if the .webm is the last source item within the fiddle I modified (above). This is not going to be completely reliable however. I also found this (old FF version but same issue): https://stackoverflow.com/a/10138928/427485 which suggests the same approach.
I find it very strange that some .webm files are working... Are you able to try re-encoding the video? Also I'd check all your mime type on that server, just in case they are wrong and only FF is getting confused (wouldn't be the first time...). This would also explain why the .webm's hosted elsewhere render fine.

Why can't I play sounds more than once using HTML5 audio tag?

This is how the sound is "stored":
<audio id = "hammer" src="res/sounds/Building/hammer.wav"></audio>
In the actual game (which I use sounds for), I use this to play the sound:
function playSound(soundid)
{
document.getElementById(soundid).currentTime = 0;
document.getElementById(soundid).play();
}
But the sound plays only the first time, and never again!
I tried resetting the "currentTime" in the console to 0, but I literally get this:
>document.getElementById("hammer").currentTime = 0
0
>document.getElementById("hammer").currentTime
0.340...
Why is this happening, how do I fix it?
See this slide and the preceding three slides of Evan Wallace and Justin Ardini's presentation on html5 game dev.
For all the resources to make some awesome games, part of their talk: http://madebyevan.com/gamedevclass/
Audio still doesn't work consistently across all browsers, as of right now:
An element must be reloaded in Chrome or it will only play once
An element must not be reloaded in Firefox or there will be a delay
function playSoundEvent() {
if (window.chrome) elems[index].load()
elems[index].play()
index = (index + 1) % elems.length
}
I had this issue recently with an html5. Worked everywhere except safari.
Using load() before calling play() solved this problem. It also helps to make sure that sound effects do not overlap with heavy clickers when event-handlers trigger sounds.
Here what I used
<audio id="sound-one" preload="auto">
<source src="http://myurl/foo.mp3"></source>
<source src="http://myurl/foo.ogg"></source>
</audio>
click here
Jquery
$("#navigation-id") //this attached is to an element on the page
.mouseover(function() {
sound-one.load();
sound-one.play();
});
A few months before I faced the same issue while developing a Piano in HTML5. When a key was pressed again and again I had to stop, rewind and play the audio on each key press. I used the same code written in this question which worked in Firefox and Safari, but not in Chrome. In Chrome it didn't play again. Finally I had to modify the code to make it work. Added one listener for the event onseeked, then set currentTime = 0 and in the event handler invoked play. This worked for me. Similarly I had to wait for the event of one action before giving next action in many places. It was an old version of Chrome. Later I found out that even some versions of Browsers support Audio, the way each one supports is slightly different. This difference won't be visible if we simply put an audio tag and play the audio, but will experience when we try to control the audio using Javascript. Anyways its all about older versions of Browsers, its much much better in all latest versions. So please check in the latest version of Chrome ( Even my piano worked in Chrome 10 without the code modification ) and regarding the audio format, I would suggest you to keep mp3 and ogg files of your audio instead of single wav file.
For anyone stumbling across this post in the future, the audio tag is really not a great way to do game audio.
I'd highly recommend taking the time to learn the WebAudio API instead.

Categories

Resources