My website play sound on some events. Everywhere it is working fine but not on Safari browser.
Found that safari adds my website to the auto-play blocked list. I want to change the default value from stop playing to allow playing, using javascript.
Thanks in advance.
It's a feature implemented for user convenience and comfort in Safari 11 and onwards to stop sites from auto-playing ads or interrupting the users.
I think you probably can't bypass it. Instead, detect if your visitors are using Safari by,
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
and display a popup explaining to them how they can enable auto-playing media on your website.
Thats a nightmare. Im currently working on a auto-play feature and not only safari but also chrome 64 mobile dont support autoplay. The only thing you can do to work around this, is by adding the muted attribute to the video tag, that should work.
Related
Hello I made a PWA that plays random videos. It works perfectly fine in Android or PC and almost perfect in Safari but when I install the app in iOS my HTML5 video player does not load the videos. It was working 2 days ago and nothing big changed since back then but today it's not working. Also because I don't have any MacOS devices to run the simulator on so I can't debug it. I have the source code open in GitHub, do you have any idea what this is all about?
I am also giving the video source with JS, if that has something to do with it.
document.getElementById("vsrc").src = srcRaw + videoid + ".mp4";
document.getElementById("videoEl").load();
GitHub code: https://github.com/ondersumer07/vinematik
Site itself: https://ondersumer07.github.io/vinematik/
After a long research I figured it out. What you need to do is add crossorigin attribute to your HTML5 video element. But it needs to be only in iOS otherwise it will break your video player on Android or Web.
To do that you need to use a bit of javascript:
// Detect iOS and if it is, add the crossorigin to the video player so that it is working as expected
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Mac') != -1 && navigator.userAgent.indexOf('Chrome') == -1){
document.getElementById("videoEl").setAttribute("crossorigin", "true");
};
This piece of code will add crossorigin attribute to video element only in iOS. And when you use that code it also works in PWA.
This is how I solved my problem.
I am developing a site which one of it's core features is playing music. It works flawlessly on any browser except for Safari. After hours of investigation I discovered a setting in Safari, preventing websites from auto playing media.
Once I disabled this feature (so I allowed auto playing media) the music was being played on Safari flawlessly too.
I now need to discover a way to bypass the auto playing media block Safari has implemented as it's default setting. I tried googling around but any problem like mine has remained unanswered, at least from what I found.
I know this is possible to fix because so many popular sites (i.e. Netflix, Youtube, Soundcloud, Spotify, etc.) all work perfectly on Safari.
Any help would be great, thanks!
That's a new feature implemented for user convenience and comfort in Safari 11. While it's more about stopping sites from auto-playing ads in the middle of a library or interrupting the user's music, it would definitely get in the way of sites like yours too.
I would suggest not attempting to bypass it, because you probably can't. Instead, detect if your visitors are using Safari, and display a contextual popup explaining to them how they can enable auto-playing media on your site. This leaves your users in full control of their browsing experience.
yeah it would be better not to block the default of safari as said by jono..and rather detect on your website if the incoming request if from a safari browser using
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
or
function GetBrowser()
{
return navigator ? navigator.userAgent.toLowerCase() : "safari";
}
var isSafari = GetBrowser();
if (isSafari == true )
//do your alternative thing
What I am trying to do is largely the same as Click the poster image the HTML5 video plays?. As you can see in the comments of the answer, it is noted that firefox (and other browsers) automatically play the video if you click on the poster anyway, while IE does not. To get around this issue, they say to use
typeof InstallTrigger !== 'undefined'
To determine whether or not to play the video. However, in the linked post,
How to detect Safari, Chrome, IE, Firefox and Opera browser?, there is heated discussion over browser detection being 'bad practice'. So, is there a way to force clicking on the poster to play the video regardless of the browser and without installtrigger. Beyond just playing the video, I noticed that for example Firefox has a play button centered in its video, and IE does not so I would like to display that button if it is not there.
Code:
HTML:
<div class="glyphicon glyphicon-play big-play-button" ng-class='{inactive: play_btn_visible}' ng-click="play_video()"></div>
JS (note the all caps):
scope.play_btn_visible = SHOULD THERE BE A CENTRAL PLAY BUTTON?;
scope.play_video = function() {
if (WILL THE VIDEO NOT BE AUTO-PLAYED ALREADY?) {
elem[0].querySelector("video").play();
}
}
Is there a good way to detect if a client browser allows inline media playback for HTML5 video?
Update
I am not trying to simply detect video support.
I am trying to detect if a video can only play fullscreen or also inline. Because on the iPhone safari iOS videos only play in fullscreen, but on iPad videos may be played inline. And by inline I mean in the page without switching to fullscreen.
In iOS10 you can now have a video play inline if the playsinline attribute is added to the video tag.
You can detect this with ('playsInline' in document.createElement('video')).
However this isn't sufficient because this won't exist on desktop browsers - where obviously playing inline is a standard feature.
So this is what I came up with : If not iPhone / iPad then we just assume video can be played inline (this may fail for certain android devices). Otherwise run the test above to check for iOS10
Here is my Modernizr test.
Modernizr.addTest('inpagevideo', function ()
{
return navigator.userAgent.match(/(iPhone|iPod)/g) ? ('playsInline' in document.createElement('video')) : true;
});
Whereas the document iOS-Specific Considerations says:
Currently, Safari optimizes video presentation for the smaller screen
on iPhone or iPod touch by playing video using the full screen—video
controls appear when the screen is touched, and the video is scaled to
fit the screen in portrait or landscape mode. Video is not presented
within the webpage. The height and width attributes affect only the
space allotted on the webpage, and the controls attribute is ignored.
This is true only for Safari on devices with small screens. On Mac OS
X, Windows, and iPad, Safari plays video inline, embedded in the
webpage.
iOS
var videoIsFullscreen = screen.width < 320 &&
navigator.userAgent.indexOf("Safari") > -1 &&
navigator.userAgent.indexOf("Chrome") == -1 &&
navigator.userAgent.match(/(iPhone|iPod)/);
Note that im not sure if small screen is of 320px, you should adjust this value.
EDIT
Take a look at this post.
Summarizing:
var isSmallScreen = screen.width <= 320;
/// the shadows here
var isWideScreen = screen.width >= 568;
After all, I found this post that may help you much
Can I avoid the native fullscreen video player with HTML5 on iPhone or android?
ANDROID
How to play inline html5 video in Android Browser
Note that is for native Android Browser not for Android Chrome.
Starting from iOS 10 video fullscreen option will be available for phones as well, when adding attribute playsinline to video element.
For earlier versions webkit-playsinline can be used, but it will only be respected on iPhones when page is pinned to home screen.
<video webkit-playsinline playsinline></video>
To detect whether inline playback is available canplay event listener can be used, to check whether video is in full screen. If phone doesn't support inline playback it will go straight to fullscreen when starting playback.
var inlinePlaybackSupported = true;
var elem = document.querySelector('video');
elem.addEventListener('canplay', function () {
//if in fullscreen here, then inline playback is not supported;
if (elem.webkitDisplayingFullscreen) {
inlinePlaybackSupported = false;
}
});
The solution I'm using is this:
var video = document.createElement( 'video' );
...
video.addEventListener( 'playing', function () {
// Note: we are adding event listener for 'playing' event, not for 'play' event!
if ( video.webkitDisplayingFullscreen ) {
console.log( 'Inline playback is not supported' );
} else {
console.log( 'Inline playback is supported' );
}
}, false );
Now there is obviously a problem with this aproach: you don't know whether inline is supported or not until after the video has started playing. Also, the event may trigger multiple times if the user pauses the video (not really a problem, but you have to be careful).
I've tested this on iPod touch, iPhone, iPad, Nexus 5 and Htc One X. It provides correct resulsts on all of this deivces.
I don't know if it's going to work on android devices that play video in fullscreen by default. Personally, I've never saw an android device that plays video in fullscreen. But running my method on nexus 5 gives an interesting console log message:
'HTMLVideoElement.webkitDisplayingFullscreen' is deprecated. Please use the 'fullscreenchange' and 'webkitfullscreenchange' events instead.
So I presume that for android you'll have to use something like that:
video.addEventListener( 'webkitfullscreenchange', function ( e ) {
if ( document.webkitIsFullScreen ) {
console.log( 'Inline playback is not supported' );
} else {
console.log( 'Inline playback is supported' );
}
}, false );
but personally, I never saw this event being fired. Neither on android, nor on iOS.
Some other things that I've tested on several iOS devices that DOESN'T WORK:
property video.webkitSupportsFullscreen - always returns false
events 'webkitendfullscreen' and 'webkitenterfullscreen' - these are the funny ones - webkitendfullscreen works just fine, but webkitenterfullscreen never gets fired
ADDED:
I actually managed to find an android device that only shows video in fullscreen (Fly IQ245 Plus). Although its behavior is very similar to that of iOS, I was unable to detect fullscreen change by any means mentioned above.
Im looking for a way to detect if the user is using Opera Mini on iPad. The reason why I want to do that is because Opera Mini on iPad does not support HTML5's "video" tag or Flash. I need to be able to have a static image loading in my video container in that specific case.
Is there any way of detecting this??
Im already using the ipad detection like:
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad){ ... }
Now, can I get that specific browser?
You could check for <video> support directly using Modernizr.
I think this will answer your question.
https://www.handsetdetection.com/features/mobile-browser-detection
I hope this helps.