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.
Related
I created an audio player dynamically with autoplay enabled. But it is working with desktop browser not in android browser. And progress handler not dispatched.
If I enable the controls attribute and click the play button it will dispatch the progress handler and playing the audio. Even I was tried to play by manually by calling the play() method.
I want to play the audio once canplaythrough handler triggered.
Audio on mobile devices often requires a user event (click / touch) in order to play, which seems to be what is happening in your case.
You can check out the SoundJS Mobile Safe Tutorial to learn more about the issue and a couple of ways to work around it.
Hope that helps.
So I was recently trying to learn html5 stuff and got to the audio tag. It seems to work just fine on my PC's browser, Chrome, but not so much on my android (4.0, using both the stock browser and dolphin). It will play the audio once, but never again. Take this site for example:
http://www.stefanvignir.de/rimshot/
Very basic, it has a button that plays audio every time you press it, but not on my android. It only plays the first time you press it. How do you get around this? Just wait for mobile browsers to update?
I heard a workaround is to set audio.currentTime = 0; but that didn't seem to solve anything.
Apparently you can reset the source (audio.src = audio.src) and that will allow you to play it more than once, but it has to re-download the file. A workaround, I guess, but not acceptable.
Any suggestions? Thanks.
this works in desktop and andriod browsers for multiple presses - and you can wrap in a div etc for styling:
<a onclick="this.firstChild.play()"><audio src="1.mp3"></audio>play</a>
More than just the audio tag so you have more control over what the play button looks like. If you need more buttons you can change the code for pause etc
Does anyone know if there is a way to get Airplay to work on an html5 video that is using CUSTOM CONTROLS? That is the important part, I realize that you can just add the x-webkit-airplay="allow" attribute to the element if you are using the built in html5 controls. But my video player uses custom built controls.
It appears that Safari will put the Airplay button on the built in html5 controls, but is there a way to do it if I'm not using the built in controls? Here is a link to the html5 player I've written. Notice that the controls at the bottom are my own:
http://pluralsight.com/training/Player?author=keith-brown&name=aspdotnet-security&mode=live&clip=0&course=aspdotnet-security
Thanks!
Good news here! The feature has been implemented in Safari 9.
Safari 9.0 allows you to create custom controls for HTML5 media with JavaScript AirPlay support. Use Safari's WebKitPlaybackTargetAvailabilityEvent to detect Airplay availability and then add your own controls for streaming audio and video to AirPlay devices.
Via. What's New in Safari 9
Here's an example from HTML5 video и кнопка для AirPlay
// Detect if AirPlay is available
// Mac OS Safari 9+ only
if (window.WebKitPlaybackTargetAvailabilityEvent) {
video.addEventListener('webkitplaybacktargetavailabilitychanged', function(event) {
switch (event.availability) {
case "available":
AirPlayButton.show();
break;
default:
AirPlayButton.hide();
}
AirPlayButton.on('click', function() {
video.webkitShowPlaybackTargetPicker();
});
});
}
Sadly Apple hasn't implemented Airplay JavaScript event calls, this is mostly because when you use AirPlay in your native quicktime controls AirPlay prompts the user with near by AirPlay devices. Currently there isn't a Safari specific JS implementation to pull this data in your content and create buttons based on what's available.
As of Feb 2013, the only thing you can specify for AirPlay in HTML5 is if you wish to show or not show AirPlay controls.
https://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html
You can file a bug with Apple if this is a feature you would like in future releases:
https://bugreport.apple.com/
Hope this helps.
We can check webkitcurrentplaybacktargetiswirelesschanged event to catch switch off airplay device:
this.on(videoEl, 'webkitcurrentplaybacktargetiswirelesschanged', this.checkWireles);
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
Is there a way to access/listen to the previous/next buttons in the iOS HTML5 video player? Ideally I would listen to some sort of a prev and next event and swap out the videos accordingly without the user having to close the video and click my prev/next buttons.
(source: iphonefaq.org)
I am currently using jwplayer to generate the html5 video and listening to their playlist next/prev listeners don't seem to do the trick. I can always find and attach listeners to the actual <video> tag pretty easily though.
If you attach listeners to the video tag itself then when the user hits next and previous then the listeners in the code will put up on those buttons. I am doing something similar with youTube videos. If you hit next it goes to the end of the youtube video and fires a video complete event tag and then I load the next video when that is called, so that the video will one loop without the next button and two the users can hit the buttons. I have not found a way to monitor the buttons in the player on the iphone side, but if I find it I will post that as well since it is important to know both angels if possible.
Funny thing I think I am looking to try and do the same exact thing. I know how to transition the videos to the next without having to leave the fullscreen mode because of using youTube api in the js but I am not able to observe the quicktime player itself and need to for another feature that I would like to work on.
That's the native iOS player which is a thin version of Quicktime. You'll know if it's an HTML5 player when it doesn't transition from the Quicktime player and your page in Safari. How is your movie being embedded?
I recently had a similar problem and was unable to find a solution using the HTML player. I ended up implementing the video player using MPVideoPlayer Framework and launching it from my web view with a custom URL scheme (AppName:Commnad:Asset). I was then able to use the delegate methods to monitor user interactions. If you would like to see basic implementation, let me know and I can add some code.