Show controls while HTML5 video is playing - javascript

Is there a way to show the controls after a video has started playing. Basically, I'm playing a video with play(), and I want the controls to stay up for a few seconds. Currently (at least on my Android device), the controls fade once the video starts.
Toggling the controls attribute doesn't work, unfortunately.

HTML5 video on Android (iOS too) is not opened inline but in the native player (i.e. outside the browser), so the <video>-tag attributes have no control over what is going to happen in the player.
I don't know if it's possible to "hack" / set-up the native player so I guess you'll have to do research on that. I don't know of any way to remotely influence the behavior of the Android application unfortunately. In case you find out something it would be nice if you could let me know btw.
Also see a recent question of mine (which is rather discouraging unfortunately).

Related

Detecting if flash player is currently playing? - Chrome extension

I'm trying to make a chrome extension that involves detecting whether or not an adobe flash player video is current playing or is paused. I'm fairly sure this can be done quite easily with HTML5, but any ideas about other video players?
Thanks!
I highly doubt there is a universal method.
Flash video players are opaque "programs" that differ from site to site, they don't have a universal play/paused state for the video in them exposed anyhow.
Your question is therefore like "can I detect whether there is a video player currently playing or paused in Windows", and you can guess that there is little chance for a universal solution.
There is a play/pause state of the flash object itself, I suppose, but this is not connected to the video playback. It's whether the flash object is completely frozen or not. At most you can detect if a flash object is present.

Detect if the UIWebView can play video inline on iPhone ( allowsInlineMediaPlayback )

I am trying to tell if my video is going to play inline once the user starts the video (as apposed to fullscreen/in the native video player) on an iPhone in a UIWebView before the video has started. I have no way of knowing if the UIWebView has the setting allowsInlineMediaPlayback = YES as i do not know in what app or on what page my video is being displayed.
My goal is to only show the video if it can be played inline.
Is there any way to read the allowsInlineMediaPlayback setting from javascript, or detect if my video will play inline or not?
Everything I have read on the apple developers website seems to suggest that it will automatically play in full screen mode in safari. Now if they are using another app, as far as I know you do not have access to that apps UIWebViews properties. However, in an attempt to not be totally useless, here is a link to all of the methods you can query and you might find some useful information in there.
https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/HTMLMediaElementClassReference/HTMLMediaElement/HTMLMediaElement.html#//apple_ref/doc/uid/TP40009355-CH18-SW27
Some more information that may be useful to you.
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW1

How to make a webpage play a sound

I need to make a sound from a webpage immediately after load (OK/NOT OK signal depending on the case). The page is generated and I can control the content fully.
How do I do this in a modern, cross browser compatible way? I've experienced problems with <audio> tag (maybe browser issues, maybe I'm doing it somehow wrong). Currently I use a small flash player, but as you might guess, it is not a perfect solution.
And yes, the sound is exactly what the user wants, so please no "website with sound is not a good idea" -comments. Generally I would agree, but there are special cases.
Using an audio element works in modern browsers, and for older browsers, you can use an embed fallback (which may or may not work, depending on installed plugins, but if it does not work, there is not much you can do):
<audio src=maamme.mp3 controls autoplay>
<embed src=maamme.mp3>
</audio>
This creates visible controls at the place where you put this element. You can modify those controls to some extent or hide them. If you want to control more exactly when the presentation starts, you can dynamically add the element into the document instead of having it statically there. If old browsers are not very relevant, you could alternatively use an audio element without autoplay and use the HTMLMediaElement interface to start the presentation, do things when it has ended, etc.
If you wish to control the audio yourself, you can do it programatically through javascript.
window.onload = function(){
var snd = new Audio("sound/mysound.wav");
snd.play();
}
This should load the audio file and play it automatically once the page has loaded. It should be noted however that iOS limits any audio being played like this, without a user interaction (e.g. a click) because it forces the user to use up bandwidth and takes control away from them. Android, and other devices may or may not allow autoplaying audio, but all latest web browsers on desktop allow it (Chrome, FF, IE9+, Safari)

Best method to display html5 video on IOS

I'm breaking my head for few days trying to solve this and can't seems to find answer.
I'm trying to build a proof of concept for video player using HTML5 that works on Android and IOS, the trick is that at certain times i need to display objects on the video itself.
Now i would normally use the Video on Canvas or Video tag to solve it and then just create a layer on that with whatever additional data i want synced and triggered by the timer (on my specific example i've used PopcornJS to trigger time-based events).
NOW, it works fine on normal desktop browsers and it works well enough for android
but it seems that Safari won't render it no matter what... it insist on opening the video in it's own player that disregard any additional JS/HTML.
Ref about the issue can be seen here.
Afraid it isn't currently possible on iPhone in Safari. I've been working on an interactive presentation web app and have encountered the same problem.
This question covers the problem of full screen only video on the iPhone. The answers mention the webkit-playsinline attribute but point out that it only works inside a UIWebView object, not in Safari.
Hopefully this will change at some point in the future.

How does mobile YouTube play videos?

I'm looking to add some videos to my mobile webapp. For the best UX, I'd like to avoid having a simple static video-tag. (because its in an element which is webkit animated and video + webkit animations don't always play nicely together in my experience.)
Rather, I'd like to have an image (with a play icon on it) to "link" to the video. Mobile YouTube (as seen on iOS) have done this very nicely where when you click the image, the video seems to "pop" up to fullscreen and plays. How do they do this? Is it a link? A previously hidden video-tag? Some webkit-animation to do the "popping"?
I snooped around using Chrome Inspector (+user agent switcher to iphone4) but the videos don't play on the desktop browser, and the code overall looks quite complex..
Can you help?
What you can do is on-click of the video thumbnail, you can load the video url using the object/embed tags. In IOS, whenever a video starts playing it automatically plays it in fullscreen(feature of IOS itself)
I believe you can do something similar to this on certain browsers (e.g. WebKit.)

Categories