I am confused. The Youtube Iframe API with the standard example: https://developers.google.com/youtube/iframe_api_reference?hl=de always used to work for my mobile devices and does not work anymore now..
I´ve tried this fiddle: http://jsfiddle.net/77PJB/3/
<div id="player"></div>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '250',
width: '444',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
with the iPad,iPhone and Samsung galaxy nexus. The video does not play.. Did something change?
Thank you
Mobile Considerations
Autoplay and Scripted Playback
The HTML5 element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it's initiated by a user interaction (such as tapping on the player). Here's an excerpt from Apple's documentation:
"Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS — the user always initiates playback."
Due to this restriction, functions and parameters such as autoplay, playVideo(), loadVideoById() won't work in all mobile environments.
From: https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations
A simple workaround to have a custom looks of the "play" button:
Have an overlay element with pointer-events: none;. pointer-events works on all modern mobile browsers or simply have the video container over the button with opacity: 0.
The autplay function is not allowed for most mobile devices, so if you cut out that it works
I had this same issue too. Worked well on PC but not on phones. After a little research I found out that the video I was trying to play was CopyRighted. Due to this, the video was not playing on phones. Hope this helps someone out
use these player variables
playerVars: {'playsinline':'1', 'theme':'light','color':'white','modestbranding':1,'rel':0},
Only .playVideo() if the browser is not a mobile browser. There are many ways to detect a mobile browser as shown in this answer: Detecting a mobile browser
For example:
if(typeof window.orientation == 'undefined'){
player.playVideo();
};
Related
How should I create face detection web application which capture photo and save when face comes in-front of camera.
Which technology currently available to achieve this.
Please Help...
I've been using a wonderful solution called tracking.js (You can find it here). It's simple and wonderful.
Here's an example of how I use it in my code:
var trackerTask;
var tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
trackerTask = tracking.track('#vid', tracker, { camera: true })
tracker.on('track', function (event) {
// Do stuff when face was detected
});
// To stop tracking:
setTimeout(function () {
trackerTask.stop();
}, 500);
In the above example, replace #vid with your HTML5 <video> element.
I have been fiddling with the new web bluetooth functionality. I have one of these estimote beacons: http://developer.estimote.com/
I know the uuid for my beacon. Here is the code I am using(it is an angular app, hence $scope, $window):
$scope.runBT = runBT;
function runBT() {
let mobile = getMobileOperatingSystem();
if (mobile === 'Android' || mobile === 'iOS') {
$window.navigator.bluetooth.requestDevice({
acceptAllDevices: true,
optionalServices: ['b9407f30-f5f8-466e-aff9-25556b57fe6d']
})
.then(device => {
console.log('FOUND DEVICE: ', device);
device.watchAdvertisements();
device.addEventListener('advertisementreceived', interpretIBeacon);
})
.catch(error => { console.log(error); });
}
}
function interpretIBeacon(event) {
var rssi = event.rssi;
var appleData = event.manufacturerData.get(0x004C);
if (appleData.byteLength != 23 ||
appleData.getUint16(0, false) !== 0x0215) {
console.log({isBeacon: false});
}
var uuidArray = new Uint8Array(appleData.buffer, 2, 16);
var major = appleData.getUint16(18, false);
var minor = appleData.getUint16(20, false);
var txPowerAt1m = -appleData.getInt8(22);
console.log({
isBeacon: true,
uuidArray,
major,
minor,
pathLossVs1m: txPowerAt1m - rssi});
}
Sadly the watchAdvertisements method is not implemented yet. You may want to check the Implementation Status page at https://github.com/WebBluetoothCG/web-bluetooth/blob/master/implementation-status.md to know when this method will be supported in Chrome and other browsers.
It's unclear what the problem is, but here are a few tips:
Understand that the web bluetooth APIs are a proposed set of standards under active development, and support is limited to certain builds of Google Chrome, and as a shim for the Noble.js bluetooth central module. If you are using Angular, you need to use the latter shim to make it work, which perhaps you already are. You can read more here: https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web
If you are getting as far as the interpretIBeacon function, then it's just a matter of parsing the bytes out, which you seem well on your way to doing. You can see more about the byte layout of the beacon in my answer here: https://stackoverflow.com/a/19040616/1461050
You don't want to filter for the beacon UUID as a service, so you need to remove optionalServices: ['b9407f30-f5f8-466e-aff9-25556b57fe6d']. A beacon ProximityUUID is not the same as a GATT ServiceUUID even though they superficially have the same format. A beacon bluetooth advertisement of the type you are looking for a manufacturer advertisement and not a *GATT service** advertisement. The two advertisement types are different, but the APIs shown above should return results from both types.
I need to create site with video which have autoplay and depend on profile which user selected. So in angular i created template popupVideo:
<video id="example_video_1" class="video-js vjs-default-skin"
controls autoplay preload="auto" height="100%" width="100%">
<source ng-repeat="vidObj in fullScreenVideoUrl" src="{{vidObj.url}}" type="{{vidObj.type}}"/>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
Then in controller i have code:
function showPopupVideo() {
$scope.fullScreenVideoUrl = [];
var webm = {};
webm.url = $scope.currentProfile.video_full + ".webm";
webm.type = "video/webm";
$scope.fullScreenVideoUrl.push(webm);
var mp4 = {};
mp4.url = $scope.currentProfile.video_full + ".mp4";
mp4.type = "video/mp4";
$scope.fullScreenVideoUrl.push(mp4);
var ogg = {};
ogg.url = $scope.currentProfile.video_full + ".ogv";
ogg.type = "video/ogg";
$scope.fullScreenVideoUrl.push(ogg);
ngDialog.open({
template: 'scripts/contents/template/popupVideo.html',
className: 'popup-fullscreen',
scope: $scope
});
}
So all work fine in Chrome and IE, window opens video starts and playing.
But in FF all going wrong, when window opened first time, it started to download (according to network monitor) but NO autoplay, also in console i could see:
Specified "type" attribute of "{{vidObj.type}}" is not supported. Load of media resource {{vidObj.url}} failed. localhost:3000
All candidate resources failed to load. Media load paused. localhost:3000
All candidate resources failed to load. Media load paused.
However! If i press play it start playing video!
Then if i close this window and open again, it show in console same text about not supported, BUT now it started to play video and in same time show on it text that "No video with supported format and MIME type found" how is it possible??? It cant find and it playing it in same time...
Probably too late but what you need to do is use ng-src="{{vidObj.url}}" instead of src="{{vidObj.url}}"
I'm developing an application for both mobile and desktop browsers. I'm wondering if there is anyway to detect if a browser supports file uploading. I'm looking specifically for feature detection and not browser detection. Is there any way to find out?
Server-side or client side is fine.
Thanks
client side javascript:
<input type="file" name="file" value="" id="fileUploadField1">
<script type="text/javascript" charset="utf-8">
if (document.getElementById('fileUploadField1').disabled)
{ document.write('your device does not allow uploads'); }
else
{ document.write('your device does allow uploads'); }
</script>
You might be interested to read this article about current input type=file support on mobile and how to detect it: http://viljamis.com/blog/2012/file-upload-support-on-mobile/ (the detection is currently tested to be working on ~120 different mobile browser/mobile OS combinations).
Basically, we are just using similar detection as Modernizr does, but use UA detection as a backup to filter out those mobile browsers that falsely report support (there really doesn’t seem to be any other way to detect it reliably than using these both, feature detection and browser detection).
You can use Modernizr framework with forms-fileinput extension. Give it a try.
if Modernizr.fileinput
// you can use file inputs
Visit the Modernizr download page and check the forms-fileinput extension (expand the "Non-core detects" section).
Modernizr now supports a check for whether or not file uploads are supported.
From: What is the best way to check if user can upload files?
if(Modernizr.fileinput) {
//file input available!
} else {
//No file input :(
}
If you're worried about the size of this library, you can always get one component at a time - http://modernizr.com/download/ ... or you can just copy the code they use: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/forms/fileinput.js
if(navigator.userAgent.match(/(Android (1.0|1.1|1.5|1.6|2.0|2.1))|(Windows Phone (OS 7|8.0))|(XBLWP)|(ZuneWP)|(w(eb)?OSBrowser)|(webOS)|(Kindle\/(1.0|2.0|2.5|3.0))/)) {
return false;
}
var elem = createElement('input');
elem.type = 'file';
return !elem.disabled;
I want to use FlashBuilder 4.5.1 to build a flex mobile project that lets me select multiple photos from the iPhone Camera Roll.
I've seen the flash.media.CameraRoll class, but it only seems to provide CameraRoll.browseForImage() that opens a dialog to pick ONE photo.
Does flex mobile allow something like this:
// is this a security violation?
var cameraRoll:File = new File('/var/mobile/Media/DCIM');
var photos:Array = [];
var folders:Array = cameraRoll.getDirectoryListing();
for (var i:int=0 ; i<folders.length; i++) {
var files:Array = folders[i].getDirectoryListing();
for (var j:int=0 ; j<files.length; j++) {
var photo:File = files[j];
photos.push(photo);
}
}
// show photos, somehow...
However, this method does not provide access to thumbnails managed by: '/var/mobile/User/Media/Photos/Photo Database'
Is there another way to do this?
PS: I'd try this on my iPhone, but I'm still waiting for my iOS development certificate.
Oddly, I don't think your code is an explicit security violation. I do think it would get your app rejected by Apple, though. It seems that the iOS file system is protected, at least in part, by policy rather than security (based on conversations I've had with other developers).