I'm trying to get a Youtube video to autoplay on safari mobile using the YouTube iframe API. Here's my code:
<div class="player-wrapper featured-small featured-medium featured-large featured-xlarge">
<div id="player"></div>
</div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
playerVars: {
'controls': 0,
'showinfo': 0,
'autoplay': 1,
'loop': 1,
'modestbranding': 1,
'playlist': '<?php echo $scales_hero_video; ?>'
},
videoId: '<?php echo $scales_hero_video; ?>',
events: {
'onReady': onPlayerReady}
});
}
function onPlayerReady(event) {
event.target.mute();
event.target.playVideo();
}
</script>
Thanks in advance guys!
The video is supposed to autoplay and loop while being muted. But the video does not begin playing in safari mobile at all.
Apple does not allow autoplay or scripted playback in WebKit-based browsers on iOS-devices, this to prevent unwanted downloads over cellular network.
As mentioned in the YouTube Player API manual (https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations):
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.
So what you want, autoplaying a video on Safari Mobile is not possible...
Sincerely,
Leon Hagendijk
Related
I have consumed the azure media player in my angularjs application and able to view the video. But on revisit the same view where the video tag present, not playing the video, but audio is playing in the background.
I am using ui-router for routing.
Thanks in advance for a quick help.
Here is my angular js code to view the video
var myOptions = {
"nativeControlsForTouch": false,
controls: true,
autoplay: false,
width: "640",
height: "400",
}
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{
"src":
"//amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-
faba6c2206a2/AzureMediaServicesPromo.ism/manifest",
"type": "application/vnd.ms-sstr+xml"
}
]);
amp("azuremediaplayer").ready(function(){
var myPlayer = this;
myPlayer.play();
});
**HTML tag**
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-
big-play-centered" tabindex="0"></video>
I also face the same issue while using azure media player.
After dispose the player on closing window will get resolved this issue.
myPlayer = amp("azuremediaplayer", {
"nativeControlsForTouch": false,
controls: true,
autoplay: true
})
myPlayer.dispose();
I'm trying to play audio in an ionic app. In the browser everthing works fine, but on the device no audio is played. But i think it plays the file, because the ng-hide works. I just hear nothing. Volume is up, i also tried with headphones.
Do i really need a plugin like org.apache.cordova.media?
I developed once an app and played a video, and there was the video tag enough.
What's my mistake?
This is my code:
.controller('AudioCtrl', function($scope, $http, $timeout) {
var vid = document.getElementById("audio");
vid.onended = function() {
$timeout(function(){
$scope.pause = true;
}, 0);
}
$scope.pause = true;
$scope.playAudio = function() {
vid.play();
$scope.pause = false;
}
$scope.pauseAudio = function() {
vid.pause();
$scope.pause = true;
}
}
)
Markup:
<audio id="audio">
<source src="../audio/14.mp3" type="audio/mpeg">
</audio>
<img src="img/second/play.png" ng-click="playAudio()" ng-hide="!pause" alt="" id="s_play" class="animated bounceIn">
<img src="img/second/pause.png" ng-click="pauseAudio()" ng-hide="pause" alt="" id="s_play" class="animated bounceIn">
I've got the issue...
The path of the mp3 was wrong. It should be "audio/14.mp3"
Chrome can load it, but the device fails.
I tried to simpliy assign the following getting started HTML code to the DocumentText property of the WebBrowser control.
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
This gives me the following script error at runtime:
It turns out that even the following simplified code produces the same error:
webBrowser1.DocumentText = "<!DOCTYPE html><html><body><script src='https://www.youtube.com/iframe_api'></script></body></html>";
So it looks like the WebBrowser control is not able to load the iframe-API. What could be the problem here? Or how could I investigate this error further?
I found the solution for WebBrowser. First we have to force WebBrowser running with the latest IE which we have on our machine like this.
Second I have to stream HTML through ASP.NET Web API and Katana like this, using WebBrowser to navigate to http://localhost:xxxx/api/xxxx
Setting DocumentText won't work because WebBrowser has many security limitations when loading html locally.
The other simple solution is just use other browser engine like Gecko or CefSharp.
I'm building an app using Ionic with AngularJS. I'm using the ngCordova library for access to device APIs.
Here's my code for users to select an image from their gallery:
document.addEventListener("deviceready", function () {
$scope.chooseFromGallery = function () {
var options = {
sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
targetWidth: 1000,
targetHeight: 1000,
allowEdit: true
};
$cordovaCamera.getPicture(options)
.then(function (imageURI) {
$scope.postData.imageUri = imageURI;
}, function (error) {
console.log(error);
})
}
});
This works fine, but only opens the 'moments' part of the user's gallery. Which only shows images taken by the phone itself, not saved ones. It also splits them up by date and location.
Edit: It seems to show some photos saved to the phone, but not all. I have no idea why.
How can I make it default to the users's camera roll that shows a continuous grid of all images stored on the phone, arranged by date.
I can find anything that describes what I need in the docs to add to the options object that is passed to the getPicture method.
Docs link
Thanks :)
Use Camera.PictureSourceType.PHOTOLIBRARY
The doc says that SAVEDPHOTOALBUM is the same that PHOTOLIBRARY, but it's not, SAVEDPHOTOALBUM only shows pictures taken by the camera, and PHOTOLIBRARY show all images on the device
I am developing cordova application for BB10,android,iod,windows8.
within that i have requirement of opening url in default device browser.
for that i had used org.apache.cordova.inappbrowser plugin.
but after using that i came across problem of relaunching application once i back from browser.
[problem in all platform except windows8]
so that i had used below solution,
jQuery(document).delegate('.external', 'click', function(e) {
window.open(e.target.href, '_system', 'location=yes');
e.preventDefault();
});
<a class="external" href="myUrl">Track Now</a>
with above solution,
Android: it was working fine.
Blackberry10 problem: Url is not opened in external browser it is only opened in app browser,
IOS Problem: url is not working at all(when i click on link nothing happened).
So, any help from your side is really appreciated.
Yeah below is the solution for my case.
And its working fine in all android, BlackBerry10 and IOS platform.
resolving blackberry issue by adding blackberry invoke plugin.
function openBlackBerryBrowser(url) {
function onInvokeSuccess() {
alert("Invocation successful!");
}
function onInvokeError(error) {
alert("Invocation failed, error: " + error);
}
blackberry.invoke.invoke({
target: "sys.browser",
uri: url
}, onInvokeSuccess, onInvokeError);
}
if (window.device.platform.toLowerCase().indexOf('blackberry') > -1) {
jQuery(document).delegate('.external', 'click', function(e) {
openBlackBerryBrowser(e.target.href);
});
} else {
jQuery(document).delegate('.external', 'click', function(e) {
e.preventDefault();
var ref = window.open(e.target.href, '_system', 'location=yes');
});
}
Hope this will help someone.
In my opinion is not necessary the use of jquery to do this. You could try something like this, but I tested only on Android and iOS:
In your controller:
$scope.openLink = function(url){
window.open(url, '_system');
};
html:
www.google.com
Let me know if works also on BB!