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.
Related
I have an object like below:
<object data="black.html" width="100%" class="vidlink vid1link"></object>
I am then using the following code to load a youtube video:
$(".vid1link").attr("data", "https://www.youtube.com/embed/MhKxm_G6FRw?autoplay=1");
This works great. But then I want the user to "close the video". The following code triggers the data attribute to change to a black page:
$(".vid1link").attr('data', 'black.html');
This works in fine on Firefox and IE/Edge. But on chrome the video continues to play. I have checked the elements in the console, and it is successfully replacing the data with black.html, but it still continues to play the video, as mentioned, only in Chrome.
Is this a known bug or normal chrome behaviour?
Many thanks
EDIT: For now I have found a work around by sending a pause request to the youtube video:
Add the following to the youtube link: enablejsapi=1
this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
Although - this doesn't seem to work if there are multiple videos on the page.
$('.vid1link').replaceWith('<object data="black.html" width="100%" class="vidlink vid1link"></object>');
You need to remove completely old element before replace the attribute
document.getElementsByClassName(".vid1link").setAttribute('data', 'black.html');
The final device I'll be putting this on is an android TV box, but I'm testing on my galaxy s5. Both are having the same issue.
I'm using Full Screen Browser by Klurige, and I originally had some GIF's at the bottom of the page that I wanted to loop, but they ended up being to clunky and big to run efficiently on the TVbox, so I decided to switch over to html5. I've tried with WEBM and MP4, both are doing the same thing.
I have the autoplay and loop attributes in the html5 video as such:
<video id="zach" loop autoplay class="picture"><source src="P-Zach.webm">Error</video>
Neither works be default in the browser. I just see a gray video icon. I can't even click to start it.
I've tried formatting in different ways and everything mentioned on the broken-links.com blog post people keep pointing to. I've tried javascript .play() options. None do anything.
If I add the controls attribute to the video, I can play the video, so I know the video file works, but it still won't loop.
Any help?
Okay, so it looks like it has something to do with android blocking webview from letting javascript control the html5 video.
That, in combination with the lack of native support for loop or autoplay attributes made me ditch fullscreen browser and switch to the only browser I could find that DID support those - Firefox.
I used an app called Ful!screen (or something like that) to remove the notification bar, loaded firefox with the webpage (with html5 playing and looping perfectly) and scrolled down slightly to hide the top bar.
Tada! Fullscreen browser with html5 video instead of GIFs.
Solved my own issue another way.
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
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.
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.