I'm hoping it's possible to make interactive presentations that play sounds on certain user events using the canvas, and have it work properly and load on iOS, either as a mobile site, phonegap type thing, or wrapped webview. I know html5 and video is a total dead end on iOS (stupid) because of the no-autoplay and no gobble all clicks issue. If I'm not using video but just moving pictures around (think "Ken Burns effect" with buttons too), and I want some short audio clips to play when a button is clicked, is this going to work on iOS or are there crazy no-autoplay-no-preload restrictions that prevent that too? Any pointers to working examples would be fine too, the signal-to-noise ratio on searching this question is abysmal. ;-)
For playing audio on iOS and android you have to use html5 audio tag .
<audio controls>
<source src="yourFile.mp3" type="audio/mp3">
</audio>
this comes with inbuilt control . If you want custom look and fill then there are some libraries in jquery ,you can use that .
Related
I am creating software in Delphi 10.2 Tokyo using FMX. I want to show a video in the background behind all components using TMediaPlayerControl. I send the TMediaPlayerControl to the back and play the video, but the video doesn't play behind the components, but rather it plays on top of them.
I put a TMemo in the client area and a TMediaPlayerControl behind it. What it should do is play the video behind the TMemo, but instead it plays on top of the TMemo.
How can I play video in the background behind the TMemo?
If you want to do this, you will need a video player that can render directly on the openGL surface (ie render on the delphi form actually). As far as i know their is only one videoplayer that can do this, it's the TalVideoPlayer implemented in alcinoe (https://sourceforge.net/projects/alcinoe/). The current implementation is only for ios / android but the windows implementation seam quite simple to do and the macos version quite trivial as it's use the same api as ios
You can use the libvlc to render directly to a form or whatever you want.
Call libvlc_media_player_set_display_window() to set a window handle where the media player should render its video output.
So you can show a video in the background behind all components.
I'm using wrapper classes and components from
http://prog.olsztyn.pl/paslibvlc
very simple indeed
Checked in FMX Delphi 10.4.2 - worked properly (libVLC 3.014 - latest)
I load a UIWebView with an html script that contains embeeded video (almost all from youtube). Reproducing videos was working ok. But since this was tested on iOS 10 the full screen takes all the screen but the video itself dont increase nothing, just only center and dont change size. But if i try with iOS 9 or 8 the full screen resize the video to fit all the screen
I think iOS has implemented new rules about the default video player on webview, or something is missing on the html script. I was trying to add tags like on the script and css rules, but nothing yet. Thanks.
if on iOS 10，use wkwebview，otherwise uiwebview，if else solve it
Does video.js support Android WebView?
We use an Android app to put a tablet in Kiosk Mode in which our web app runs. However, webview video tag does not give us a image of the first frame, only the ugly widgets background.
A better question might be whether your WebView supports video.js. You need to configure the WebView to behave equivalently to a proper browser – HTML5 video definitely won't work without some tweaking. I've found this custom web view to work well (including with video.js):
https://code.google.com/p/html5webview/
i'm still working on my html5 videoplayer w/ flashplayer fallback. it is now part of a bigger kind of widget, that encapsulates tabs, sliders, carousels (extensively using jquery)
focussing on the videoplayer: the user can (repeatedly) pick videos to play from a carousel . once a carousel item is clicked, i put a div w/ a fitting background-image over my videoplayer, so as to have a splashimage working the same for every client. that 'selfmade splashimage' and the current frontitem of the carousel (which was just clicked) then are bound to the load() method of the video. obviously there's a lot of stuff happening in between: i check for support of <video> and support of formats (mp4, ogv). i also fade in and out a bunch of stuff. that was a short version of it. and it's all working pretty okay on all the browsers i tested. it IS somewhat working on the ipad as well BUT:::
when i click my splashimage/playbutton ( -> triggering the load() method) the ipad wont play nor load my video RIGHT AWAY. the videoplayer stays black. however, when i click (trigger load()) a few more times, at some point it will start to work as planned.
the ipad works fine on the w3 html5 video events page. so i copied that page for my purpose, replaced a video with one of my videos and it gives me the FAULTY behaviour. so the problem are my videos, aren't they? the videos are currently hosted on a non-streaming server, is that the problem? my knowledge on that subject is really narrow.
sorry for not including any code and talking very general and abstract about the whole thing but i hope it suffices.
EDIT::: problem (kind of) solved. apparently the server the videos were hosted on, was causing the problems -_-
Could it have something to do with this: how to get your HTML5 MP4 video file to play before being fully downloaded as it could be downloading the video, hence the wait.
I am using HTML5 video tags in a UIWebview on the iPad, and positioning them as needed using CSS. The key part of these videos is that they are designed to take up part, but not all, of the visible area on the page. When I'm doing this in the "normal" mode of displaying content only to the primary UIScreen, everything works great.
However, when an external VGA projector is hooked up as a second UIScreen, the video tag content immediately becomes FULL SCREEN. This seems to also happen in Safari when looking at, for example, YouTube videos. In searching the docs, there seems to be no way to stop / control this behavior.
Is there any way to stop a video tag from forcing its content to go to full screen when a second display is connected?
Unfortunately, using a UIWebView iOS 3.2 doesn't offer any way to do this. Video in a UIWebView always plays fullscreen on an external display using the TV out feature.
However, the good news is that iOS 4 does offer a solution. UIWebView has a couple of new properties:
allowsInlineMediaPlayback
http://developer.apple.com/library/ios/documentation/uikit/reference/UIWebView_Class/Reference/Reference.html#//apple_ref/doc/uid/TP40006950-CH3-SW32
mediaPlaybackRequiresUserAction
http://developer.apple.com/library/ios/documentation/uikit/reference/UIWebView_Class/Reference/Reference.html#//apple_ref/doc/uid/TP40006950-CH3-SW33
The former will allow the videos to remain 'inline' as opposed to using the full-screen player.