I have implemented a video using HTML5 on a website, which contains no sound and functions as a background video loop. If a user visits that site on chrome mobile on Android, media controls for the video appear in their notification bar. I don't need these controls for the site and want to ask if it's possible to hide these media-control-elements using JavaScript.
What I mean with "media-control-elements" shows the following example.
Related
To enable the autoplay of a video we just add the "autoplay" attribute to the video tag.
This doesn't work on mobile devices and browsers like Google Chrome, iPad, iPhone, the "play" method will not work until there is no user interaction with the touchscreen.
But in this link or this link, with a custom JavaScript player, they bypass this block, and the video autoplay on iPhone, iPad, Webkit Browsers and all Mobile Devices without user interaction.
How can i do it myself?
if at the load of the page i simulate touch events this might unlock the video "play" method?
i cloud load a video url only with canvas? without the video tag?
Please help and explain me.
There's a library which uses canvas to autoplay inline video on mobile. The downside is that there is no audio, since canvas originally wasn't intended for that.
The library basically loads all the frames and then shows them to you in a sequence. This brings along some limitations regarding the length of the video.
Beats gifs tho....
https://github.com/gka/canvid
I'm building a mobile site in which in embed some youtube videos with the IFrame player API (https://developers.google.com/youtube/iframe_api_reference).
Basically, I need to start this video after the user clicks a custom play button. This button triggers the player.playVideo() on the loaded youtube iframe to play the video. This works fine on the standard android and iphone browser (video starts playing fullscreen). However in Google Chrome's mobile browser (android and ios) I get a second play button over the video after my first click, thus making me click twice to play the video.
Anyone know a workaround for this?
Theoretically the autoplay is disabled on Safari and Google Chrome for Android . In my experience I never could avoid to show the second button with Youtube player API, even with an action triggered by user (the first click).
I'm using an embedded media player on my website to allow blackberry users to listen to audio without having to download it. (I'm testing this on blackberry bold 9700 and so any cool html5, flash or embed tags wont work) The reason I have it embedded is because I want to be able to keep track of a users listening time.
Basically what I want is to be able to know when a user clicks play or pause. How do I gain control of these buttons? possibly using some jquery?
This is my code for the player:
<object data="myfilepathHere" type="audio/mpeg">embedded track isnt working!</object>
This is the site I used as a reference:
http://devblog.blackberry.com/2009/08/blackberry-browser-embedded-media-content-automatic-playback-how-to/
I can get the two buttons play/pause and stop to show up (and it looks just like it does in the link I've provided) on the blackberry and the track to play so if I can get this to work that would be just dandy. thanks! :D
Sorry, I spent some time trying some ideas out and I'm pretty certain it's not possible to track or listen to any events on the Object. You really need the Audio tag on BBOS 6.0 and higher. If you were doing a WebWorks app instead of a website we have an API that would help (https://developer.blackberry.com/html5/apis/blackberry.audio.player.html).
Supporting 6.0+ is not that bad. You may find that the majority of people who visit your site have that version or higher.
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.)
I'm currently creating an iPhone web application for piano chords, and I wanted to add an option that would let the user press a Play button and play the selected chord. However, I'm not sure how to do this, or if it's even possible.
Basically, is there any way to programmatically (through Javascript) play a sound file (wav, mp3,...) in the background? (i.e. not leaving the page)
Thanks for any help!
(Keep in mind that I'm developing a web app, so I'm using HTML, CSS & JS, not the native SDK)
short answer: no
from the docs:
Safari on iPhone plays audio and video
in webpages in fullscreen playback
mode only.
yes you can.
http://www.schillmania.com/projects/soundmanager2/
see it in action at soundcloud.com
With HTML5 audio, iPhone can play without fullscreen.
IOS requires sound be played with the press of a control button. If you are looking to autoplay a sound at some event on an HTML page, forget it.