We Keep Coding

currentlyLoading-Event for html5 video-Tag

I'm looking for a way to create something like a loading animation on a html5 video similar to the Youtube Video display (reference: https://www.youtube.com/watch?v=5vcCBHVyG50)
I tried it with the canplay-Event but I think I misunderstood the real meaning of this event.
My thought of this event was that enough data has been loaded and buffered so that the video can be played again.
But in my case this event just fires once. At the beginning of the video.
Is there any special Event which will be fired when the video is playable or needs to load more data?

Use fontAwesome framework. It has got your animation.

Native tick sound on button clicks with PhoneGap

I'm handling the touchstart and touchend events to determine when an element is clicked. It works very well and is responsive, but I'm missing the default click sound that happens in native apps when you press a button.
Is there a way to trigger this sound with PhoneGap rather then using html5 audio?

Well, I have developed new Cordova plugin a few days ago which provide that you need.
Take look at https://github.com/VVelda/device-feedback
You can then call native sound response on button click. No any audio media, or any other workaround. I hope it will help you, altough you already set the answer that help you. :-)

Take a look at the Media class.
http://docs.phonegap.com/en/2.9.0/cordova_media_media.md.html#Media

Have a look at this blog post:
http://pieterderycke.wordpress.com/2014/01/20/native-tick-sound-on-button-click-with-phonegap/
It explains how to develop a PhoneGap plugin that plays the native click sound when pressing a button in HTML5.

Youtube/vimeo iframe won't play in firefox

I am embedding a youtube/vimeo video onto my site with an iframe.
<iframe src="http://www.youtube.com/embed/{$entity->getYoutubeVideoID()}" ...></iframe>
The {$entity->getYouTubeVideoID()} bit is smarty template code syntax. I don't think that is the problem because the video uploads and plays fine in Chrome and IE9 and up. The video also uploads to firefox and safari fine, meaning I can see the video and it's the right one. But when I click the video it does not play in either firefox or safari.
What is interesting is that the other events are triggered. That is, on mouseover the play buttons on the videos change. On the youtube videos, the button in the middle with the play icon starts out as grey and on mouseover turns to red. So the iframe is registering events. But, it won't play on click. I have no idea where to go from here.
The only other event handlers I have on the iframe is this one but I doubt that is messing it up:
$(window).blur(function(){
if($('iframe').is(':focus')){
mySwipe.slide(mySwipe.getPos(), 1000);
}
});
(mySwipe refers to the swipe.js slideshow library)

I had an issue with playback buttons in firefox also. I was using a html5 Doctype, so I added the following after the youtube url
&html5=1
maybe this might help you.

I simply could not get embedded videos to play inside the swipe.js library (or any other touch enabled jquery library). My solution was to extract thumbnail images from vimeo/youtube APIs and use them as placeholders in the slideshow. Then register a click event on the thumbnail that opened the video in a lightbox.

I know this thread is six years old, but I recently had this problem and all of the solutions on the internet did not work. But I figured it out for my site:
If you have a secure site (HTTPS) and you embed a youtube video with the code posted here,
iframe src="http://www.youtube.com/embed/{$entity->getYoutubeVideoID()}" ...
... Firefox will block it, because that is "Mixed content." HTTP is unsecure, so it is not allowed to show.
Youtube is an HTTPS site, so including that "s" in your URL will allow it to play in Firefox and IE without having to disable security.

Flexslider 2 basically solved it. Swipe.js is wonderful, but with playing youtube/vimeo in a slider Flexslider works better.

Soundcloud Custom Player Pause Player

How do you pause the Soundcloud Custom Player (http://developers.soundcloud.com/docs/custom-player)? I have a large single page with audio players. When a user navigates to a different section of the page the hash in the URL changes. How do I pause the Soundcloud Custom Player when the hash changes?
I've tried $(".sc-player").pause() but it doesn't always work. I'm looking for it to work on desktop and mobile. It seems desktop uses a hidden SWF file while mobile uses the audio element.
Any help is appreciated!

$('.sc-player.playing a.sc-pause').click();

I kind of discovered this by accident (tested on the jsFiddle page, and it paused the player).
To the code on this page I made a little addition:
http://jsfiddle.net/aj3Pw/1/
In the HTML, I added a 'Pause' button:
<button id="pause">Pause</button>
and then at the bottom of the JS, I added an event listener with "sc.pause()", and it worked:
document.getElementById('pause').addEventListener('click', function() { sc.pause();
Hope this helps!

HTML5 <video> callbacks?

I'm working on a site for a client and they're insistent on using HTML5's video tag as the delivery method for some of their video content. I currently have it up and running with a little help from http://videojs.com/ to handle the Internet Explorer Flash fallback.
One thing they've asked me to do is, after the videos finish playing (they're all a different length), fade them out and then fade a picture in place of the video --- think of it like a poster frame after the video.
Is this even possible? Can you get the timecode of a currently playing movie via Javascript or some other method? I know Flowplayer (http://flowplayer.org/demos/scripting/grow.html) has an onFinish function, is that the route I should take in lieu of the HTML5 video method? Does the fact that IE users will be getting a Flash player require two separate solutions?
Any input would be greatly appreciated. I'm currently using jQuery on the site, so I'd like to keep the solution in that realm if at all possible. Thanks!

You can view a complete list of events in the spec here.
For example:
$("video").bind("ended", function() {
alert("I'm done!");
});
You can bind to the event on the element like anything else in jQuery...as for your comment question, whatever element you're delivering for IE, yes, it would need a separate handler rigged up to whatever event it provides.
For the other question about timecode, the timeupdate event occurs when it's playing, and the durationchange event occurs when the overall duration changes. You can bind to and use them just like I showed with the ended event above. With timeupdate you'll probably want the currentTime property, with durationchange you'll want the duration property, each of which you get directly off the DOM object, like this:
$("video").bind("durationchange", function() {
alert("Current duration is: " + this.duration);
});

There is an OnEnded event associated with the video tag. However, it does not work for me in the current version of Google Chrome.
HTML 5 Video OnEnded Event not Firing
and see also
Detect when an HTML5 video finishes
For a general-purpose solution (supports video tag with fallback see)
http://camendesign.com/code/video_for_everybody
or
http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library or http://www.mediafront.org/

I used this code. It basically reloads the video which will get the poster to show again. Assuming you want the image at the end to be the same as the poster. I only have one video on the page so using the video tag works. I have my video set to autoplay on page load so I added the pause after the reload.
<script type="text/javascript">
var video= $('video')[0];
var videoJ= $('video');
videoJ.on('ended',function(){
video.load();
video.pause();
});
</script>