How do you can detect which Event are in a HTML5 element available?
For Exampe is the Event "onvolumechange" on IOS and Android Devices unavailable but in Firefox and Chrome on Desktop its work. How can you detect it? I've tried it so
if("onvolumechange" in document) {
// DO ...
}
But it only works in Firefox.
According to the article, Everything You Need to Know About HTML5 Video and Audio, the easiest way to probe for support is along the lines of:
var video = document.getElementsByTagName('video')[0];
alert(video.canPlayType('video/ogg'));
The article goes on to say:
There are several levels of support. First, the video element might
not be supported at all. This is the case for Opera 10.10 and IE8. For
this case, you can just put content inside the video element and it
will be rendered (in the above examples, the content is just "video
not supported"). No need to do anything further for this case.
Second, the video element might be supported but the codecs you want
to use are not. Safari doesn't support Ogg/Theora/Vorbis, while Opera
and Firefox don't support MPEG-4/H.264/AAC. To detect this, you can
either use the canPlayType() method on a media element, or you could
have an onerror event listener; if a video fails to play because the
codec is not supported, an error event is fired.
As far as I can tell, there's no quick way to detect support for all the video related events (loadstart, progress, suspend, abort, error, emptied, stalled, loadedmetadata, loadeddata, canplay, canplaythrough, playing, waiting, seeking, seeked, ended, durationchange, timeupdate, play, pause, ratechange, and volumechange) without attempting to fire them first. In other words, try changing the volume and see if an error is returned.
Also note that the W3 has a nice page that demos event and property detection and firing of the <video> element at http://www.w3.org/2010/05/video/mediaevents.html
Related
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" });
HTML5 how to check if user has viewed the entire video? ie, without skipping through. It is straightforward on desktop based browsers, though iOS allows playback control even when you do not explicitly enable it. Therefore, simply listening to the 'ended' event is not accurate.
Try this in iOS. I can only test in Chrome and Firefox:
Use the seeked event
vid.addEventListener("seeked", function() {
}, false);
Additionally, if you only want to detect the user seeking forward, keep track of the playback position by listening to the timeupdate event and reading the currentTime property.
See this JSFiddle
There's a problem: android webkit draws video-element and I want to catch transition to the fullscreen when I press on the fullscreen-button that situates on the bottom to the right of video element. I can't do that. There's no such event as 'fullscreen' or smth else like this. Can you help me? For catching events I use JavaScript codes.
Thx in advance.
I assume you use Android 3.1+ for testing?
http://developer.android.com/sdk/android-3.1.html
Previous versions did not support inline video. If you want to catch the event you will have to disable default controls and implement your own as there is no "enterFullscreen" event for the native controls (neither is there one for you own controls but you could start whatever you want upon clicking your own FS button) - again, this wont work on version 3.0 or earlier. AND you won't have native fullscreen afterwards. Android's implementation of html5 video is rather poor.
I did not yet test Android 4.0 on that matter, meaning it could be better there.
I'm developing a web app for iOs device, but I have a problem with the html5 audio tag...
I designed a custom audio player, and I control the song with javascript functions.
With safari desktop the app works well, but on safari mobile it doesn't recognize the duration of the audio; the value of the duration property is NaN.
I have to play, stop and replay the audio for retrieve the correct value.
Probably the cause is that the media preload is disabled on safari mobile...
Is there a way to read the correct value at the first shot?
This is a bug in iOS... even inside the function that gets called on the onloadedmetadata event, you MAY STILL get NaN.
In my case, this happens at random when the user selects a new mp3 and the code dynamically sets the src property. The audio plays fine, yet SOMETIMES, the duration returns NaN, screwing up any progress indicator that depends on that value.
The medata is available after this event has fired:
loadedmetadata
More info
https://developer.mozilla.org/en/Introducing_the_Audio_API_Extension
Can you use javascript to detect if the video is playing? paused? or stopped?
I know VLC under browsers can do this, but don't know how to do it without VLC?
You can query the media object to get the playback state:
http://www.w3.org/TR/2011/WD-html5-20110113/video.html#playing-the-media-resource
"A media element is said to be potentially playing when its paused
attribute is false, the element has not ended playback, playback has
not stopped due to errors, the element either has no current media
controller or has a current media controller but is not blocked on its
media controller, and the element is not a blocked media element."